[Vue] Nested routes & push()

Nested routes

/detail/0/author 로 접속하면 detail 내에 작가소개 란을 보여주고
/detail/0/comment 로 접속하면 detail 내에 댓글란을 보여주고 싶을 때
이런식으로
/detail/ 페이지 안에서 또 페이지를 쪼개고 싶을 때 쓸 수 있는것이 Nested routes 다.

Nested routes를 사용하지 않고 modal창 띄우는 방식으로도 똑같이 구현할 수 있다.
하지만 URL로 페이지를 분기하고 싶으면 Nested routes 사용하면 된다.

(router.js)

import { createWebHistory, createRouter } from "vue-router";
// vue-router 라이브러리의 함수들을 import 한다.
// createRouter : 라우터생성을 도와주는 함수

import compDetail from './components/compDetail.vue';
import compAuthor from './components/compAuthor.vue';
import compComment from './components/compComment.vue';

const routes = [
  {
    path: "/detail/:id",
    component: compDetail,
    children: [
      {
        path: "author",
        component: compAuthor
      },
      {
        path: "comment",
        component: compComment
      },
    ]
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

이런식으로 routes 안에 children 으로 또 routes를 나누면 된다.
주의할 점은 children의 path에는 “ / “슬래스가 들어가면 안된다.
참고로,
router 관련 에러는 console창에 뜬다.

<router-view></router-view>

해당 컴포넌트에 router가 보여질 위치에
<router-view></router-view>
태그를 넣는다.

( src/components/compDetail.vue )

<template>
  <div class="detail_ttl">
    <h2>{{ blogList[num].title }}</h2>
    <p>{{ blogList[num].date }}</p>
  </div>
  <div class="detail_content">
    {{ blogList[num].content }}
  </div>
  
  <div class="detail_tab">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" v-bind:href="`/detail/${num}/author`">Ahthor</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" v-bind:href="`/detail/${num}/comment`">Comment</a>
      </li>
    </ul>
  </div>

  <router-view></router-view>
  
  <div class="detail_foot">
    <router-link to="/list" class="btn btn-secondary">글목록</router-link>
  </div>
</template>

<script>
export default {
  name: 'compList',
  data(){
    return {
      num: this.$route.params.id,
    }
  },
  props: {
    blogList: Array
  }
}
</script>

<style>
.detail_ttl{text-align:center; padding:3rem 2rem;}
.detail_ttl h2{font-weight:700;}
.detail_ttl p{margin:1rem 0 0;}
.detail_content{border-top:1px solid #eee; border-bottom:1px solid #eee; padding:3rem 2rem;}

.detail_tab{padding:2rem 1rem;}

.detail_foot{text-align:center; padding:2rem;}
.detail_foot .btn-secondary{color:#fff;}
</style>

@click=”$router.push(‘/detail/0’)”

$route와 $router 가 헷갈릴 수 있는데
$route 는 현재 경로에 있는 정보를 알려주고,
$router 는 페이지 이동 관련 기능

(compList.vue)

<template>
  <div class="blog_list">
    <ul>
      <li v-for="(a, i) in blogList" :key="i">
        <!-- <a v-bind:href="`./detail/${a.number}`"> -->
        <a href="#" @click="$router.push(`/detail/${i}`)">
          <h5>{{ a.title }}</h5>
          <p>{{ a.content }}</p>
        </a>
      </li>
    </ul>
  </div>
</template>

여러개 컴포넌트를 보여줄 때 참고

• Named Views