[vuejs] vue-router 동적 라우팅

 

■ 동적 라우팅

 

URL이 필요에 따라 바뀌어야하는 경우 아래와 같이 콜론(:)을 사용하여 파라미터를 넣어줄 수 있다.

파라미터의 이름이 id 인 것은 필수는 아니나, 컨벤션이라고 함

const routes = [
    {
      path: '/user/:id',
      component: UserAuth,
    },  
    {
      path: '/main',
      component: Main,
    },    
]
export default routes

물론 두 개 이상의 동적 파라미터를 가질 수도 있다.

{
  path: '/user/:id/auth/:pageNm',
  component: UserAuth,
},

<p v-for="item in arr" :key="item">
  <router-link :to="`user/${item.id}`"> {{ item.user }} </router-link>
</p>

 

해당 컴포넌트에서 파라미터의 변경 시점을 잡고 싶다면?

 

방법 1. watch로 $route 객체를 감지하면 된다.

watch: {
    '$route' (to, from) {
    	console.log(this.$route.params.id);
     }
}

 

방법 2. 컴포넌트 가드인 'beforeRouteUpdate' 메서드를 사용한다.

new VueRouter({
  routes: [{ path: "/user/:id", component: User }],
});

// 현시점의 URL : user/1
export default {
  beforeRouteUpdate(to, from, next) {
    console.log(this.$route.params.id); //1
    next();
  },
  methods: {
    moveToNext() {
      // 페이지 이동 전 beforeRouteUpdate 호출
      this.$router.push('/user/2');
    },
  },
};