Vue-Router 之 2 router.addRoutes 动态添加路由

语法

router.addRoutes([路由配置对象])
// 或者
this.$router.addRoutes([路由配置对象])

Vue-router 的动态添加子路由的注意事项

• 格式必须为数组的形式。
• addRoutes添加的路由必须为一级路由。
• 切莫用JSON方法深copy路由对象
• 把动态的路由也添加到 $router.options.routes 里

1. 格式必须为数组的形式。

2. addRoutes添加的路由必须为一级路由。

比如动态生成的菜单路由是需要绑定到第二级路由list的children下，那要把父路由、甚至祖先路由也带上，否则不会识别，如下：

下图是默认的初始路由：

const routes = [
  { 
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: "/list",
        name: "MenuList",
        component: MenuList
      },
      {
        path: "/scene",
        name: "Scene",
        component: Scene
      }
    ]
  },
  {
    path: '*',
    name: '404',
    component: ErrorPage
  }
];

下图是调用接口返回动态生成的路由数据：

[
  {
    path: "guide",
    name: "实施向导",
    component: SystemConfig
  },
  {
    path: "data",
    name: "资产管理",
    component: DataTable
  },
  {
    path: "datatype",
    name: "资产模型管理",
    component: DataTable
  }
  ...
]

也许有人会说把上面列表的路径加一个父路由的路径不就好了吗，比如 path:"/list/guide"。然而你会发现，虽然会把路由添加到路由表里，但并不能和前台组件里的 root-link 对应的路径相匹配。

可以通过下面方法获取动态添加的路由信息：

// 如果matched的数组Length > 0，则表明路由已经成功添加到router中
this.$router.resolve({name: '资产管理'}).route.matched

所以正确的姿势应该是把包括一级路由的路由列表一起添加进去，这里不用担心路由会重复，Vue-router里会做处理的。

3. 不要用 JSON 方法深copy路由对象

通过 JSON.parse(JSON.stringify(routes)) 复制的路由对象会破坏配置对象的 component 结构

如果使用被破坏的路由则会报下面这个报错：Vue.esm.js:628 [Vue warn]: Error in beforeCreate hook: “TypeError: Cannot read property ‘call’ of null”

4. 把动态的路由也添加到 $router.options.routes 里

通过addRoutes添加的路由虽然可以发挥作用，但并没有把新增的路由添加到 $router.options.routes 里，这样就导致在组件中获取不到，造成不必要的麻烦。

可以在addRoutes之后再重新赋值一下路由对象，如下：

router.addRoutes(newList);
router.options.routes = newList;

这样就成功的把子路由动态的添加了进去，完结撒花！！！