vue 动态路由添加

公司管理系统需要菜单权限控制，因此进行动态路由添加实现左侧权限菜单控制

1.首先中控系统需要设置一下字段控制权限

菜单名称：左侧菜单的名称，放在路由meta: { title: '公司信息' }中
权限标识：使用的权限标识是路由的name,name为唯一
路由：是路由中的path,可以自定义灵活使用，path可以自定义的时候，通过按钮跳转的路由方法要使用name this.$router.push({ name:'orderDetails', }),这样不担心path发生变化，查询不到
组件名称：path文件指向的地址
顺序：左侧菜单的顺序
模块图标：菜单icon显示，此处使用阿里的icon比较灵活
菜单状态：是否使用 显示状态：是否在左侧菜单显示，但是渲染路由

2.在管理系统中axios获取中控系统对菜单权限控制的数据

1.vue-admin 框架中 建立permission.js 通过router.beforeEach((to, from, next) => {})进行路由监听,系统访问调用vuex中获取的菜单数据，然后通过router.addRoutes(store.getters.addRouters)添加进路由，在main.js中引入 import '@/permission' // permission control
2.vuex中对数据权限的数据处理

function filterAsyncRouter(routes, roles) {
  let res = []
  roles.forEach(item=>{
    let ind  = routes.findIndex(s=>s.authCode == item.code)
    //此处如果没有传递组件路径则实用router.js自定的
    if(ind&&item.component==''){
      res.push({
        path: routes[ind].redirect||item.path,  
        name: routes[ind].name,
        meta: { title: item.name,icon: item.icon},
        component:''
      })
    }
    if(item.component){
      res.push({
        path: item.path,
        name: item.code,
        component: _import(item.component),
        meta: { title: item.name ,level:1,icon:item.icon}
      })
    }
  })
  return res
}
//组件路径需要格式化
function _import(file){
  return function(resolve){
    require([`@/views${file}.vue`],resolve)
  }
}
const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      //添加的路由需要挂在Layout
      state.addRouters = [{
        path:'/',
        component: _import('/layout/Layout'),
        name:'menu',
        children:routers.filter(item=>item.component!='')
      }]
      //routers是左侧需要渲染显示的菜单
      state.routers = routers
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        const { menuTree } = data
        let accessedRouters
        accessedRouters = filterAsyncRouter(constantRouterMap, menuTree)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    }
  }
}

export default permission```