Vue.js를 사용하여 중첩된 경로를 여러 개 수행하는 방법

Vue.js를 사용하여 중첩된 경로를 여러 개 수행하는 방법

내포된 루트를 2개 이상 만들 수 있는가?

이런 것을 만들고 싶다.

+--------------------+
| User               |
| +----------------+ |
| | Profile        | |
| | +------------+ | |
| | | About      | | |
| | | +--------+ | | |
| | | | Detail | | | |
| | | +--------+ | | |
| | +------------+ | |
| +----------------+ |
+--------------------+

그래서 웹에서는 이렇게 될 것이다.

링크:/localhost/user

웹 디스플레이:

USER

링크:localhost/user/profile

웹 디스플레이:

USER
  PROFILE

링크:localhost/user/profile/about

웹 디스플레이:

USER
  PROFILE
    ABOUT

링크:localhost/user/profile/about/detail

웹 디스플레이:

USER
  PROFILE
    ABOUT
      DETAIL

jsfiddle과 함께 하는 어떤 예시 코드도 매우 감사할 것이다.

해당 경로를 중첩하기만 하면 된다(분명히 사용자의 정보도 필요함).id매개 변수:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          path: 'profile', component: Profile,
            children: [
              {
                path: 'about', component: About,
                  children: [
                    {
                      path: 'details', component: Details,
                    }
                  ]
              }
           ]
        }
      ]
    }
  ]
})

같은 코드지만 축약된 코드(아마도 더 잘 읽는 데 도움이 될 것이다):

const router = new VueRouter({
  routes: [{
    path: '/user/:id', component: User,
      children: [{
        path: 'profile', component: Profile,
          children: [{
            path: 'about', component: About,
              children: [{
                path: 'details', component: Details,
              }]
          }]
      }]
   }]
})

참조URL: https://stackoverflow.com/questions/53993016/how-to-do-multiple-nested-route-with-vue-js