Nested routes와 push함수

저번에 /detail/숫자에 따른 각각의 상세페이지를 보여줬는데, 여기서

/detail/0/author 이렇게 적으면 0번글의 상세페이지의 저자를 보여주고 싶다. 이럴 때, 쓰는게 nested routes이다.

만드는 방법은 children : {}을 안에 만들면 된다.

{
    path: '/detail/:id',
    component: Detail,
    children: [
      {
        path: "author",
        component: Author,
      },
      {
        path: "comment",
        component: Comment,
      },
    ]
},

이렇게 Detail을 보여주는 컴포넌트 밑으로 children을 적어주고, 거기에 또 path와 component를 적어주면 된다.

결과적으로, /detail/:id/author ,/detail/:id/comment 가 된다. 여기서 경로를 적을 땐, 상대경로로 /빼고 적어주면 된다.

그러곤 Detail컴포넌트에 보여주는 author과 comment 컴포넌트이기에

<div>
    <h4>디테일페이지</h4>
    <h5>{{블로그글[$route.params.id].title}}</h5>
    <p>{{블로그글[$route.params.id].content}}</p>
    <router-view></router-view>
  </div>

이렇게 detail컴포넌트에 router-view를 써주면 된다.

 

마지막으로,

여기 List컴포넌트 페이지에서 제목을 누르면 해당 디테일페이지로 이동하게 하고싶으면,

<template>
  <div v-for="(a,i) in 블로그글" :key="i">
    <h5 @click="$router.push('/detail/'+i)">{{a.title}}</h5>
    <p>{{a.date}}</p>
  </div>
</template>

클릭시 $router 기능을 이용해서 $router.push(경로) 이렇게 적으면 적은 경로로 이동하게 할 수 있다.

 

여러가지 기능이 있으니까 vue Router에서 찾아쓰자.