vue.js - Vuejs动态添加子路由

Question

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

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

Answer 1

您可以使用 $router.addRoutes 重新添加路由，指定子路由。

您需要通过在 $router.options.routes 数组中搜索路由定义来获取当前路由定义(与 $route 对象相对)匹配当前 $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])
}

Here's an example fiddle of dynamically adding child routes in the created hook of a route's component definition.