중첩 router

[Yejin0O0]

중첩 router 사용 해야함

지금은 router index에 다 때려박았기 때문에, 코드 보기 왕 불편하다

[Yejin0O0]

참고 url: https://router.vuejs.org/kr/guide/essentials/nested-routes.html

중첩 router를 쓰는 방법은 의외로 간단한듯.

   routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // /user/:id/profile 과 일치 할 때
          // UserProfile은 User의 <router-view> 내에 렌더링 됩니다.
          path: 'profile',
          component: UserProfile
        },
        {
          // /user/:id/posts 과 일치 할 때
          // UserPosts가 User의 <router-view> 내에 렌더링 됩니다.
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

[Yejin0O0]

간단하다고 생각한건 완전 오산

내가 생각한 중첩의 의미와 통념적으로 사용하는 중첩의 의미는 완전히 다름

[Yejin0O0]

vue router 공식 문서에서 설명하는 vue 중첩 라우팅은 마이페이지와 같다.

'메뉴바 라우터' 가 있는데, 마이페이지 내의 메뉴바 라우터가 또 필요할 때, 그때 중첩 라우팅을 사용한다.

[Yejin0O0]

https://developpaper.com/question/can-vue-router-do-module-splitting-its-like-modular-splitting-of-vuex/

👆 나의 구원자

이 페이지 참고하면서 했음

BoardRouter.js를 만들어 board와 관련된 url 정리를 해주었고, boardRouter로 export함

index.js

import { createRouter, createWebHistory } from 'vue-router'
import BoardRouter from './BoardRouter' // board와 관련된 router 불러옴
import Home from '../pages/Home' // default

export default createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
component: Home
},

    ...BoardRouter 
   _board와 관련된 router 불러올 땐 앞에 ...을 붙여줍니다요_
],

})

[Yejin0O0]

만세! 성공!