如何使用 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,
              }]
          }]
      }]
   }]
})