제 1장 나만의 Vue.js 라우터 만들기

1. 나만의 Vue.js 라우터 만들기

나만의 라우터 만들기 시리즈 의 4부 중 1부
알렉스 조버 모랄레스씀

아마도 당신은 프론트엔드 세계에서 한동안 라우터를 사용해 왔을 것입니다. 하지만… 직접 라우터를 작성한 적이 있습니까? 라우터의 기초를 아십니까? 그냥 작동하는 것처럼 보일 수 있지만 내부적으로 라우터는 여러 가지를 처리해야 합니다.

라우터는 라우팅을 담당하는 구성 요소입니다. 라우팅은 여러 목적지로 가는 길을 찾는 작업으로 정의할 수 있습니다. 이것은 다른 영역에 적용됩니다.

예를 들어 엘리베이터의 라우터는 숫자 5가 있는 버튼을 누르면 5층으로 이동합니다.

웹 개발에서 라우팅의 두 가지 주요 영역을 볼 수 있습니다.

• 백엔드: 라우터가 URL 패턴과 일치하는 올바른 컨트롤러를 호출합니다.
• 프런트 엔드: 라우터는 URL 패턴과 일치하는 해당 구성 요소를 뷰에 로드합니다.

이 시리즈에서는 라우터의 메커니즘을 이해하기 위해 Vue.js를 사용하여 자체 프론트 엔드 라우터를 만드는 방법을 살펴보겠습니다.

기본 라우터 구성 요소 만들기

먼저 경로에 사용할 구성 요소 Home 및 Articles 를 생성해 보겠습니다. 내용은 중요하지 않습니다. 해당 경로에서 무언가를 보여주기 위한 것일 뿐이므로 다음과 같은 것으로 충분합니다.

<!-- Home.vue -->
<template>
  <div>Home</div>
</template>

<!-- Articles.vue -->
<template>
  <div>Articles</div>
</template>

Vue.js는 컴포넌트 기반 프레임워크이므로 라우터를 만드는 간단한 방법은 컴포넌트를 사용하는 것입니다. 구성 요소 기반 도구에 대해 작업한 모든 프론트 엔드 개발자가 이해할 수 있기 때문에 그렇게 하는 것이 더 보편적입니다.

경로 정의

앱 라우터 를 만드는 것부터 시작하겠습니다. 라우터 구성 요소 자체가 될 vue 파일과 경로 정의:

<!-- Router.vue -->
<script>
import HomePage from "./HomePage";
import ArticlesPage from "./ArticlesPage";

const routes = {
  "/": HomePage,
  "/articles": ArticlesPage
};
</script>

저는 HomePage* 및 *ArticlesPage 구성 요소를 모두 가져오고 route 개체를 생성합니다. 이 개체는 키는 경로이고 값은 구성 요소 자체입니다. 이 방법으로 경로에 액세스하는 것은 간단하고 빠릅니다. 왜냐하면 단순히 route["/"]를 수행하여 객체 속성에 액세스하는 직접적인 작업이기 때문입니다.

더 많은 사용자 정의가 필요한 경우 이를 정의하는 다른 방법은 개체를 값으로 사용하는 것입니다.

const routes = {
  "/": {
    component: HomePage,
    default: true, // indicate if it's the default route
    name: "root"
  }
}

vue-router 와 마찬가지로 배열을 사용하여 수행할 수도 있습니다. 배열 솔루션은 나중에 반복해야 하므로 더 복잡하지만 더 유연합니다.

const routes = [
  {
    path: "/",
    component: HomePage
  }
]

// A simple way to get the component is using ES2015 array find method
const route = routes.find(route => route.path === "/");

라우터 컴포넌트 렌더링

경로가 설정되면 주어진 조건에서 컴포넌트를 렌더링할 방법이 필요합니다. Vue.js 템플릿은 우리에게 완벽한 동적 컴포넌트 를 제공합니다.

동적 구성 <component>요소를 사용하면 is 속성을 조건 으로 특수 요소 를 사용하여 구성 요소 간에 쉽게 핫스왑할 수 있습니다.

<template>
  <component :is="routedComponent"></component>
</template>

그런 다음 해당 조건을 구현해야 합니다. 그 조건은 경로에 따라 달라지므로 계산된 속성은 다음과 같은 목적에 완벽하게 맞습니다.

export default {
  data() {
    return { current: window.location.pathname };
  },
  computed: {
    routedComponent() {
      return routes[this.current];
    }
  }
};

computed 속성은 기본 경로(어떤 것과도 일치하지 않는 경로)에 대한 구성 요소를 반환하기에 좋은 위치이며 OR 연산자 를 사용하는 것만큼 쉽습니다.

routedComponent() {
  return routes[this.current] || DefaultComponent;
}

최종 Router.vue 구성 요소는 다음과 같습니다.

<!-- Router.vue -->
<template>
  <component :is="routedComponent"></component>
</template>

<script>
import HomePage from "./HomePage";
import ArticlesPage from "./ArticlesPage";

const routes = {
  "/": HomePage,
  "/articles": ArticlesPage
};

export default {
  data() {
    return { current: window.location.pathname };
  },
  computed: {
    routedComponent() {
      return routes[this.current];
    }
  }
};
</script>

대체 솔루션으로 렌더 함수(또는 JSX)가 이 경우에 완벽하게 맞습니다. 렌더 함수를 사용한 렌더링은 기본적으로 동적이기 때문입니다. 따라서 Router.js 파일에서 구성 요소를 다시 작성할 수 있습니다.

// Router.js
import HomePage from "./HomePage";
import ArticlesPage from "./ArticlesPage";

const routes = {
  "/": HomePage,
  "/articles": ArticlesPage
};

export default {
  data() {
    return { current: window.location.pathname };
  },
  computed: {
    routedComponent() {
      return routes[this.current];
    }
  },
  render(createElement) {
    return createElement(this.routedComponent);
  }
};

라우터 구성 요소 사용

응용 프로그램의 루트 구성 요소로 App.vue 구성 요소를 생성해 보겠습니다. 그런 다음 라우터 구성 요소를 가져오고 등록합니다.

<!-- App.vue -->
<template>
  <div>
    <app-router></app-router>
  </div>
</template>

<script>
import AppRouter from "./AppRouter";

export default {
  components: {
    AppRouter
  }
};
</script>

템플릿 <app-router>에서 라우터에 의해 렌더링된 구성 요소로 대체될 태그를 배치 합니다. 스크립트 섹션에서 라우터를 가져와서 앱 구성 요소에 추가합니다.

브라우저의 표시 줄에 경로를 작성하여 /와 /articles 탐색을 실행하는 경우, 당신은 라우터에서 해당 구성 요소와 해당 내용을 볼 수 있습니다.

더 편리하게 하기 위해 App.vue 에서 경로 사이를 탐색하는 몇 가지 버튼과 메서드를 추가해 보겠습니다.

<!-- App.vue -->
<template>
  <div>
    <button @click="goTo('/articles')">Go to Articles</button>
    <button @click="goTo('/')">Go to Home</button>
    <app-router></app-router>
  </div>
</template>

<script>
import AppRouter from "./AppRouter";

export default {
  components: {
    AppRouter
  },
  methods: {
    goTo(route) {
      window.location = route;
    }
  }
};
</script>

다시 시도하고 버튼을 클릭하면 여전히 동일한 방식으로 작동합니다.
여기 에서 이 기사 의 코드와 데모 를 찾아 직접 사용해 보세요!