Как сделать несколько вложенных маршрутов с Vue.js?

Question

это возможно для создания Вложенных маршрутов больше, чем 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 будеточень признателен, спасибо.

Answer 1

Вам просто нужно вложить соответствующие маршруты (очевидно, вам также понадобится параметр 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,
              }]
          }]
      }]
   }]
})