[Vue.js] Nested routes 와 push 함수 사용해보기

💡 실습 포인트!

---

💜 nested routes 사용해보기

• /detail/0/author 경로로 접속하면, detail 페이지 내에 작성자를 보여주고, /detail/0/comment 경로로 접속하면 detail 페이지 내에 댓글을 보여주는 등 route 로 나눈 페이지 안에 또다시 route 로 나눈 페이지를 보여줄 수 있다.
• 그리고 이렇게 특정 페이지 내에 또 route 를 나누는 것을 nested routes 라고 한다.
• 물론 모달창처럼 UI 만드는 방법을 활용해도 유사하게 구현할 수 있긴 하지만, 이렇게 URL 을 나눠두면 앞으로가기 혹은 뒤로가기 버튼이 동작한다는 장점이 있다.
• 따라서, 필요에 따라 nested routes 를 사용해보면 좋을 것 같다.

🤍 nested routes 코드 작성하기

// 전체 코드 미리보기
// 코드 내용이 길어 불필요한 부분은 제외했다.

import Author from "./components/Author.vue";
import Comment from "./components/Comment.vue";

const routes = [
  {
    path: "/detail/:id(\\d+)",
    component: Detail,
    children: [
      {
        path: "author",
        component: Author,
      },
      {
        path: "comment",
        component: Comment,
      },
    ],
  },
];

• nested routes 코드는 router.js 파일에 위와 같이 children 이라는 항목을 만들어서 routes 를 추가하면 된다.
• 그래서 위와 같이 작성하면, /detail/:id/author 로 접속하면 Author.vue 를, /detail/:id/comment 로 접속하면 Comment.vue 를 보여줄 수 있는 것이다.
  (물론 그 전에 Author.vue, Comment.vue 와 같이 보여줄 vue 파일을 만들어서 import 는 해두어야 한다.)

---

🤍 Detail.vue 파일에 <router-view></router-view> 추가하기

<template>

  <div class="container mt-4">
    <h4>상세 페이지</h4>
    <h5>{{posts[$route.params.id].title}}</h5>
    <p>{{posts[$route.params.id].content}}</p>
    <p>{{posts[$route.params.id].date}}</p>
  </div>

  <router-view></router-view>
  
</template>

• 이제 위와 같이 <router-view></router-view> 를 원하는 위치에 추가해주면 /detail/:id/author, 혹은 /detail/:id/comment 라는 경로에 접속했을 때, 해당 위치에 Author Component, Comment Component 를 볼 수 있는 것이다.

---

💜 페이지 이동해보기

🤍 $router.push() 사용해보기

$router.push('/detail/0')

• 위와 같이 $router.push() 함수 안에 이동하고자 하는 경로를 작성하면, 페이지 이동이 가능하다.
• <router-link></router-link> 대신에도 사용이 가능한데, 장점은 변수를 집어넣을 수 있다는 것이다.

---

🤍 $router.go() 사용해보기

$router.go(-1)

• 위와 같이 $router.go() 함수 안에 숫자를 넣어 사용하면 앞으로가기, 뒤로가기 기능을 사용할 수 있다.
• 예를 들어 1 이라고 쓰면 앞으로 1번 가고, -2 라고 쓰면 뒤로 2번 가는 식이다.