[Vue.js] 6. 라우팅 - 동적 라우팅

앞 포스트에서 /post/detail 은 포스트 상세 화면을 조회하기 위한 화면으로 설계했다. 상세화면은 포스트 아이디(id)에 따라 내용이 달라지는데 이를 라우트 경로에 추가한다면 화면을 그릴때 단서가 될수 있을 것이다.

• /post/1
• /post/2

이런식으로 detail 대신 아이디 값이 온다면 어떨까?

뷰 라우터는 이러한 동적 라우트 매칭을 위한 설정도 제공한다.

 

먼저 라우터의 PostDetail 의 path 를 '/post/:id 로 바꾼다.

 

import Vue from "vue"
import VueRouter from "vue-router"

import Home from '../views/home.vue'
import Login from '../views/login.vue'
import Logout from '../views/logout.vue'
import Post from '../views/post.vue'
import PostDetail from '../views/postdetail.vue'
import PostAdd from '../views/postadd.vue'


// 뷰 어플리케이션에 라우터 플러그인을 추가한다.
Vue.use(VueRouter)

const router = new VueRouter({
    mode: "history",
    routes: [
      { path:'/',component:Home },
      { path:'/login',component:Login },
      { path:'/logout',component:Logout },
      { path:'/post',
        component:Post,
        children:[
          {path:'/post/:id',component:PostDetail},
          {path:'/post/add',component:PostAdd},
        ]
      },
    ],
})
  
export default router

 

하위컴포넌트에서 상위컴포넌트에서 넘겨준 id 값에 접근하려면 this.$route 변수로 접근이 가능하다.

따라서 this.$route.params.id 를 통해 가능하다.

<template>
    <div>
        <p>
            PostDetail
        </p>
        <p>{{this.$route.params.id}}</p>
    </div>
</template>

그리고 id 를 동적으로 받아 router-link 의 속성 to 에 전달해주면 되는데, 이때는 data 안에 path 값을 저장하고 이 path 값을 v-bind 를 통해 바인딩 하는 방식으로 연결해주었다.

//App.vue

<template>
  <div id="app">
    <h1>routing example</h1>
    <router-link to="/" exact>Home</router-link>
    <router-link to="/logout">Logout</router-link>
    <router-link to="/login" exact>Login</router-link>
    <router-link to="/post">Posts</router-link>
    <router-link to="/post/add" exact>New Post</router-link>
    <router-link v-bind:to="path" exact>Post detail</router-link>
    <!-- 라우트 아울렛 -->
    <!-- 현재 라우트에 맞는 컴포넌트가 렌더링됩니다. -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name : 'App',
  data(){
    let id = 1;
    return {
      path : '/post/'+id
    }
  }
}
</script>