网上大部分的动态添加路由都是直接添加到一级路由上去。但如果我想把动态生成的菜单路由添加到二级路由甚至三级路由中时遇到了一些坑，这里分享一下。

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结构，可以对比一下下面两个图：

正常的路由配置对象：

通过JSON方法复制后的路由对象：

如果使用被破坏的路由则会报下面这个报错：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;

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