vue动态路由学习

学习vue也有一段时间了，这段时间也遇到了不少问题，趁着有时间来复习总结一下。
动态路由在vue中的使用时非常常见的，就是根据不同的角色信息从数据库中获得不同的数据库导入路由表，实现权限控制以及动态菜单显示等效果。
步骤如下：

1. 在导航守卫处判断是否已加载路由
2. 未加载则读取后端数据，同时存入vuex状态
3. 已加载则继续下个界面的跳转

首先就是后端的读取，读取数据如下：
我开始本来是准备直接读入后端数组添加进行路由表，但是报异常了，component不可为string，修改一遍后，
在登录成功跳转的时候却报错了，显示的是 can not find module ‘xxx’,特别奇怪，因为从模块名xxx可知，它名称的读取是成功的，但是似乎并不能成功的解析这个模块，后来网上查了很久也没解决，偶然看见了别人读取component时对解析地址进行了多一步的修改。
就是使用for循环拆开各个路径再在前端重新拼起来，结果一试发现居然成功了。

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  addDynamicMenuAndRoutes()
  next()
})
function addDynamicMenuAndRoutes() {
  
  var roleid = null
  if(store.state.user.user){
    roleid =  store.state.user.user.role.id
  }
  var request = {roleid:roleid}
  api.menu.getRoutersByRoleid(request)
  .then( (res) => {
    var dynamicRoutes = addDynamicRoutes(res.data)
    router.options.routes = router.options.routes.concat(dynamicRoutes)
    router.addRoutes(router.options.routes)
  })
  .catch(function(res) {
    alert(res);
  });
}
function addDynamicRoutes (menuList=[]) {
  var routes1 = []
  // 第一层
  for(var i = 0;i < menuList.length;i++){
    let array = menuList[i].path.split('/')
    let url = ''
          for(let i = 0;i<array.length;i++){
            if(i == 0){
              continue
            }
            if(i==(array.length-1)){
              url = url + '/' + array[i].substring(0,1).toUpperCase()+array[i].substring(1)
            }else{
              url = url + '/'+ array[i]
            }
          }      
    var router1 = {
      path: menuList[i].path,
      component: resolve => require([`@/views${url}`], resolve),
      name: menuList[i].name,
      redirect: menuList[i].children[0].path,
      children:[]
    }
    
    if(menuList[i].children){
      
      var routes2 = []
      // 第二层
      for(var j = 0;j<menuList[i].children.length;j++){
        let array = menuList[i].children[j].path.split('/')
    let url =''
          for(let i = 0;i<array.length;i++){
            if(i == 0){
              continue
            }
            if(i==(array.length-1)){
              url = url + '/' + array[i].substring(0,1).toUpperCase()+array[i].substring(1)
            }else{
              url = url + '/'+ array[i]
            }
          }  
        //const component1 = menuList[i].children[j].component
        var router2 = {
          path: menuList[i].children[j].path,
          component: resolve => require([`@/views${url}`], resolve),
          name: menuList[i].children[j].name
        }
        routes2.push(router2)
      }
      router1.children = routes2
    }
    routes1.push(router1)
  }
  return routes1
}

这个地方的疑问我也没搞清楚，感觉应该是前后端数据格式上是有差异的，不能直接解析（但是感觉不应该）。