在Vuejs中动态添加子路由

Question

根据这个官方示例,我们可以在vuejs中添加嵌套/子路由.但我找不到任何关于动态添加这些子路由的方法的帮助/文档.例如,仅在访问父路线时添加子路线.

目前,Vue应用程序中的所有路由都是在我们创建路由器实例的单个位置定义的.有一个名为addRoutes的api ,但我不知道如何使用它在路由旁添加延迟加载的应用程序功能.如果有人熟悉Angular2 + Module系统,那么就可以为该模块中的功能模块定义路由,甚至可以延迟加载它们.想知道VueJs是否可以实现某些目标？

Answer 1

您可以$router.addRoutes用来重新添加路线，指定子级。

您需要$route通过在$router.options.routes数组中搜索与current匹配的路由定义对象来获取当前的路由定义（相对于对象）$route.path。然后将children路由定义数组添加到对象，并将其传递给$router.addRoutes。

created() {
  let { routes } = this.$router.options;
  let routeData = routes.find(r => r.path === this.$route.path);
  routeData.children = [
    { path: 'bar', component: Bar },
    { path: 'baz', component: Baz },      
  ];
  this.$router.addRoutes([routeData])
}

这是在creaked路由的组件定义的钩子中动态添加子路由的示例。