[Vue.js] 6. 라우팅 - 중첩된 라우팅

중첩된 라우팅

 

블로그 예제를 위한 중첩된 라우팅을 설계해보자 . 아래의 6가지 경로를 선정했다.

• / 홈
• /login 로그인
• /logout 로그아웃
• /posts 포스트 목록
• /posts/detail 포스트 상세
• /posts/new 포스트 추가

일단 router 를 생성한 router/index.js 에 들어가자.

생성된 router 에 routes 속성에 path 와 component 들을 배열로 추가한다.

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


// 뷰 어플리케이션에 라우터 플러그인을 추가한다.
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},
      {path:'/post/detail',component:PostDetail},
      {path:'/post/add',component:PostAdd},
      
    ],
  })
  
export default router

여기서 PostDetail 과 PostAdd 는 Post 의 자식인데, 이를 표현하기위해 children 이라는 속성이 있다.

이는 특정 라우팅의 하위 경로가 변경됨에 따라 하위 컴포넌트로 변경할수 있는 기능이다.

 

Children 속성 - 배열로 담아야함 !

/posts 경로를 포함한 하위 경로인 /posts/new와 /posts/detail을 children 옵션으로 변경해 보면 이렇다.

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/detail',component:PostDetail},
          {path:'/post/add',component:PostAdd},
        ]
      },
      
      
    ],
})
  
export default router

• /post 라우팅

• /post/new 라우팅

• /post/detail 라우팅

 

가만히 보면 중첩된 라우팅이 중첩된 화면을 구성하는데 적합하다는 것을 알수 있다.