vue.js - 如何在 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并添加您自己的逻辑。