Vue.js - 중첩 라우트

앱 UI를 구성하다보면 여러 개의 중첩된 컴포넌트로 이루어져 있는 구조가 있는 경우가 있다.

이러한 중첩된 페이지들을 연결시키기 위해 vue에서는 vue-router를 사용하여 라우트 구성 관계를 간단히 표현할 수 있다.

🔻 Vue-Router 설치 과정 및 구조는 아래 링크에 포스팅해두었다.

https://meongj-devlog.tistory.com/174

[Vue.js] Vue-Router 설치 및 적용하기

---

https://router.vuejs.org/kr/guide/essentials/nested-routes.html#%E1%84%8C%E1%85%AE%E1%86%BC%E1%84%8E%E1%85%A5%E1%86%B8%E1%84%83%E1%85%AC%E1%86%AB-%E1%84%85%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%90%E1%85%B3

중첩된 라우트 | Vue Router

 

 

route/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Board from '../components/Board.vue'
import Card from '../components/Card.vue'


Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes : [
    // bid : bid라는 int형 변수로 받음
    { path: '/b/:bid', component: Board, children: [
      { path: 'c/:cid', component: Card }
    ] }
  ]
})


export default router

Board라는 컴포넌트 아래 Card 컴포넌트를 렌더링하기 위해 children 을 사용한다. 

/ 로 시작하는 중첩된 라우트는 루트 경로로 취급되고, 중첩된 URL을 사용하지 않고도 중첩된 컴포넌트로 활용할 수 있다.

 

Board.vue

<template>
  <div>
    Board
    <div>bid : {{bid}} </div>
    <router-link :to="`/b/${bid}/c/1`">Card 1</router-link>
    <router-link :to="`/b/${bid}/c/2`">Card 2</router-link>
    <hr />
    <!-- card.vue -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bid: 0
    }
  },
  created() {
    // bid int를 가져올 수 있다
    // console.log(this.$route.params.bid)
    this.bid = this.$route.params.bid
  }
}
</script>

<style>

</style>

상위 컴포넌트인 board 컴포넌트에서 중첩 컴포넌트 card를 렌더링하기 위해 router-view 태그를 선언하였다.

 

card.vue

<template>
  <div>
    Card
    <div> cid: {{cid}}</div>

  </div>
</template>

<script>
export default {
   data() {
    return {
      cid: 0
    }
  },
  watch: {
    // route가 변경이 감지되는지 watch
    // 변경된 cid 저장
    '$route'() {
      this.cid = this.$route.params.cid
    }
  },
  created() {
    // bid int를 가져올 수 있다
    // console.log(this.$route.params.bid)
    this.cid = this.$route.params.cid
  }
}
</script>

<style>

</style>

변경된 board의 bid에 따라 card 값을 변경하기 위해 라우팅이 될 때마다 watch 를 선언하여 cid 값을 저장한다. 

 

board 컴포넌트가 변경되면 하위 컴포넌트의 cid도 같이 변경되는 것을 볼 수 있다.