[Vue.js] Named Routes / 동적 라우팅

동적 라우팅

- 라우터를 이용해서 컴포넌트를 연결할 때 동적으로 파라미터를 연결해주어야 하는 경우에 사용

 

- 이럴 때 Vue에서 활용하는 것이 Named Routes! 아래의 홈페이지를 참고했다.

 

router.vuejs.org/kr/guide/essentials/named-routes.html

이름을 가지는 라우트 | Vue Router

활용 방법은 간단하닷

Path Variable 활용

router.js에 다음과 같이 path를 설정해주면 된다.

 

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

호출

vue 파일에서는 이렇게 라우트에 링크하면 된다. 물론 userId에는 user.id처럼 동적인 데이터가 들어가야 할 것이다.

 

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

하위 컴포넌트

하위 컴포넌트에서 이러한 parameter를 사용해야 할 것이다. 다음과 같이 활용하면 된다.

 

{{$route.params.userId}}

 

앞으로 해야할 일

이제 받아온 parameter 기반으로 페이지를 만들기 위해서 API를 만들고 API 기반으로 데이터를 보여줄 수 있도록 해야겠다!