前端vue-element-template(二)动态路由

这个章节知识点不多，但是很绕，而且我觉得不是最优雅的写法，如果有更好的方法请给我留言

参考文章

https://www.cnblogs.com/langhaoabcd/p/11346227.html

简单分析

• 主要利用 router.addRoutes([]) //传入数组

• global.antRouter = menus //赋值全局变量

• Siderbar/index return this.$router.options.routes.concat(global.antRouter) //路由合并

• 到此就完成了

通过permission.js开始获取权限管理

• await store.dispatch('user/getInfo')
• store/modules/user.js //这里通过vuex发起请求
• 此时getinfo包含改用户的权限信息
• 后端返回数据即可，前端处理成符合菜单的格式
• 存入到store中

function toTreeData(data,pid){
  function tree(id) {
    let arr = []
    data.filter(item => {
      return item.id_parentauth === id;
    }).forEach(item => {
      // console.log(item.href)
      let jsonpath = {
        path: item.href,
        name: item.name,
        meta:{title:item.name, icon: item.icon},
        children: tree(item.id_auth)
      }
      if(!Boolean(item.id_parentauth)){
        jsonpath.component = Layout
        // jsonpath.redirect = '/example/table'
      }else {
        //解决import无法导入的问题
        jsonpath.component =  (resolve) => require([`@/views/${item.href}/index`], resolve)
      }
      arr.push(jsonpath)
    })
    return arr
  }
  return tree(pid) // 第一级节点的父id，是null或者0，视情况传入
}

最后一步获取vuex的menu并放入addRouters

• const menus = store.getters.menus
• router.addRoutes(menus) // 2.动态添加路由
• global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
• 合并路由 this.$router.options.routes.concat(global.antRouter) //路由合并