如何在 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 }

您也可以在运行时动态添加路径，但您需要有一个触发器来添加它。

最后一个选择是拥有一条捕获所有路线并添加您自己的逻辑。