Vue关于动态添加路由的一个坑，动态添加子路由

最近在研究Vue，项目的菜单是后台动态返回节点动态生成头部导航，然后再动态添加路由，利用的方法是 $router.addRouters()【官网的文档真的很简洁，说了跟没说一样】，路由的参数是一个数组，这个数组和我们手动进行路由配置里的routes里的是需要一样的数组；

还记得我们是怎么配置路由的吗？

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)

import home from '@/page/home'
import userinfo from '@/page/userinfo'

export default new Router({
  routes: [
    {
      path: '/home',
      component: home
    },
    {
      path:'/userinfo',
      component: userinfo
    },

  ]
});

对，我们需要先用import导入组件，一个数组对应一个组件的，这在写死的情况下很容易的；
routes 里是一个数组，数组里有 path 和 component
path 对应我们vue要访问的url
component 对应我们import进来的模板组件路径

但是如果我们用 $router.addRoutes() 这个方法的时候，你想过里面的参数要怎么写吗？
像这样?

$router.addRoutes([
    {
      path: '/home',
      component: home
    }
])

如果你手动写的话，那这是没问题的，可是后台返回给我们的数据是这样的
注意：component那里后台返回给我们的字符串的，我们不能用变量的

[
    {
      path: '/home',
      component: '/home'  
    },
    {
      path: '/userinfo',
      component: '/userinfo'  
    }
]

所幸的是，vue-router里提供了动态加载组件的方法，比如：compoent选项后面其实是可以跟一个函数的，比如

[
  path: '/home',
  component: require.ensure([], (require) => {
      resolve(require('@/page/home.vue'))
  })
]

看到这里，你会发现，其实我们写个函数，传进去字符串，然后拼接一下就可以了

function getViews(path) {
  return resolve => {
    require.ensure([], (require) => {
      resolve(require('@/page/' + path + '.vue'))
    })
  }
}

然后，我们通过服务器请求回来JSON数据后，可以这样进行添加
假如，我们是通过axios进行请求后台数据，后台返回给我们的JSON数据是这样的：

{
    "userInfo": {
        "phone": "13000000000",
        "id": 10000,
        "username": "张三丰"
    },
    "permissions": [
        {
            "path": "/userinfo",
            "name": "个人信息",
            "component": "/userinfo"
        },
        {
            "path": "/home",
            "name": "系统首页",
            "component": "/home"
        }
    ],
    "errCode": "0000",
    "errMsg": "获取成功!"
}

我们需要拿到 permissions 中的数组

let permissionsData = response.data.permissions;

//创建一个数组用来存储符合权限的路由
let dataRouter = [];
//循环遍历动态路由表的每一个路由
for (let i=0;i<permissionsData.length;i++){
   //console.info("router:"+getViews(someData[i].path));
   let data = {};
   data['path'] = permissionsData[i].path;
   data['name'] = permissionsData[i].name;
   data['component'] = getViews(permissionsData[i].path);
   dataRouter.push(data);
}

// 将路由信息，菜单信息，用户信息存到sessionStorage里
sessionStorage.setItem("routes", JSON.stringify(permissionsData));

//动态添加路由信息
this.$router.addRoutes(dataRouter);

这就把我们从服务器请求回来的权限数据，动态的添加到Vue-router里了。
如果是添加到子路由，我的办法的是这样的：
例如把服务器请求过来的数据添加到 / 节点上

$router.addRoutes([
   {
   	path: '/',
   	component: resolve => require(['@/components/Layout'], resolve),
   	meta: { title: 'Layout' },
   	children: dataRouter,
   }
]);

如果你有更简单的添加的子路由的方式，还望赐教~

Vue