如何用 Vue.js 做多个嵌套路由？

Posted 2023-02-23

【中文标题】如何用 Vue.js 做多个嵌套路由？

【英文标题】：How to do multiple nested route with Vue.js?

【发布时间】：2019-05-28 07:33:09

【问题描述】：

是否可以创建多于 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 的示例代码，谢谢。

【参考方案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,
              ]
          ]
      ]
   ]
)

【讨论】：

嗨@billal-begueradj！您能否解释一下如何使用路由器视图在模板中使用多个页面切换子页面中的路由

您能否改进答案并添加根路径或中间路径因为没有意义而无法访问的情况？在这种情况下，“模糊”组件是强制性的吗？为什么重定向还不够？