如何在Vue.js中实现n级嵌套动态路由？

Question

我想在Vue.js中实现n级动态嵌套路由，其中​​n对我来说是未知的。例如 -

abc.com/ctx-path/component/1/2/...../n

其中1,2，... n是等级

如何使用Vue-router实现这一目标？

Answer 1

在幕后vue-router路径匹配使用path-to-regexp。所以应该可以写这样的东西

{ path: '/ctx-path/component/:id+', component: Component }

要么

{ path: '/ctx-path/component/:id*', component: Component }

你也可以在run time动态添加路径，但是你需要有一个触发器来添加它。

最后一个选择是使用catch all route并添加自己的逻辑。

Answer 2

这是来自docs：

const router = new VueRouter({
    routes: [
        { path: '/user/:id', component: User,
            children: [
                {
                // UserProfile will be rendered inside User's <router-view>
                // when /user/:id/profile is matched
                path: 'profile',
                component: UserProfile
                },
                {
                // UserPosts will be rendered inside User's <router-view>
                // when /user/:id/posts is matched
                path: 'posts',
                component: UserPosts
                }
            ]
       }
   ]
})

见链接https://router.vuejs.org/guide/essentials/nested-routes.html