[Vue.js]동적 라우팅

 

router를 사용하여 동적 라우팅을 하는 경우에 파라미터 값이 필요할 때가 있다.

 routes: [
    {
      path: "/",
      name: "home",
      component: HelloWorld,
    },
    {
      path: "/dm-rooms",
      name: "dm-roomList",
      component: () => import("../components/DirectMsgList.vue"),
    },
    {
      path: "/dm-rooms/:room_id",
      name: "dm-room",
      component: () => import("../components/DirectMsg.vue"),
    },
  ],

3번째 path 부분에 "/dm-rooms/:room_id"에서 room_id를 동적경로 설정을 하여 라우팅을 해주고 있는데,

백틱을 사용하지 않고 :(콜론)을 통해서 작성해야 한다.

 

 

<template>
  <div id="app">
    <div>NickName</div>
    <button>메세지 추가</button>
    <ul>
      <li v-for="list in roomList" :key="list.room_id">
      //동적 경로로 라우팅
        <Router-link :to="`/dm-rooms/${list.room_id}`">
          {{ list.profile }}
          {{ list.nickName }}
          {{ list.dmMessage }}
        </Router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

 

 

 

그리고 작성한 router-link를 통해 접근하면 아래와 같이 url이 이동.

 

 room_id: this.$route.params.room_id,

위와 같이 router의 params를 추출해서 data() 안에 선언해 사용할 수 있기도 하다.