前几天实现了一个基于vue addRoutes() 的权限路由解决方案，特此记录一下

登录页

 Login(){
    this.$refs.userInfo.validate(valid => {
        if (valid) {
            this.$message.loading('Action in progress..', 1,()=>{
                
            });
            this.$axios.post(this.$api.url + '/login/authLogin',{
                userName:userInfo.userName,
                passWord:userInfo.passWord,
            })
            .then(res=>{
                if(res.code == 0){
                    localStorage.setItem('router',JSON.stringify(this.routerList))//将请求回来的路由列表保存到localStorage  
                    this.$router.push('/Magic')
                }
            })
        } else {
            return false;
        }
    });
},

路由实例

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/Layout'
const _import = require( "./_import_"+process.env.NODE_ENV)

Vue.use(VueRouter)
let routerList =  JSON.parse(localStorage.getItem('router')) //取到路由列表 
let getRouter; //路由暂存
let menus = []
let routes = [
  {
    path: '/',
    redirect:'/Login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "Login" */ '../views/login')
  },
  {
    path: '/Login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "Login" */ '../views/login')
  },
  {
    path:'/Error',
    name: 'Error',
    component:Layout,
    children:[
      {
        path:'404',
        name:'err',
        component: () => import(/* webpackChunkName: "404" */ '../views/error/404.vue')
      }
    ]
  },
] //默认路由

let router = new VueRouter({
  mode: 'history', //后端支持可开
  routes,
  scrollBehavior: () => ({ y: 0 })
})



router.beforeEach((to, from, next) => {
  if(to.path == '/Login'){
    next()
    return
  }
  global.openMenu = to.path
  if (!validMenu(to)) {
    next({ path: '/Error/404', query: { from: from.path }})
    return
  }
  if(!getRouter){ //路由列表没有路由则去取
    routerGo(to, next)
  }else{
    next()
  }
})
router.onError((err)=>{//路由报错
  console.log(err)
  console.log('router on error')
  console.log(
    router.app,
    router.mode,
    router.currentRoute
  )
})
router.onReady(()=>{//路由准备完毕
  console.log('router on ready')
  console.log(
    (router.app)+'\n',
    router.mode+'\n',
    router.currentRoute
  )
})
function routerGo(to, next) {
  getRouter = filterAsyncRouter(routerList) //过滤路由
  router.addRoutes(getRouter) //动态添加路由
  global.antRouter = getRouter //将路由数据传递给全局变量，做侧边栏菜单渲染工作
  next({ ...to, replace: true })
}
export function filterAsyncRouter(asyncRouterMap) { // 遍历后台传来的路由字符串，转换为组件对象
  const accessedRouters = asyncRouterMap.filter(route => {
    try {
      if (route.component) {
        if (route.component === 'Layout') {//父级组件特殊处理转换为框架组件
          route.component = Layout
          route.redirect =route.path +'/'+ route.children[0].path

        } else {
          route.component = _import(route.component)
        }
      }
      menus.push(route)
    } catch (e) {
      console.error(e)
      route.component = _import('404')
    }
    if (route.children && route.children.length) {
      filterAsyncRouter(route.children)
    }
    return true
  })
  return accessedRouters
}
export function validMenu(to) {
  if ((to.path.indexOf('/Error/404') >= 0 || to.path === '/')) {
    return true
  }
  if (menus.length > 0 && (to.name || to.path)) {
    const toName = to.name
    const toPath = to.path
    for (let i = 0; i < menus.length; i++) {
      if (menus[i].name === toName || menus[i].path === toPath) {
        return true
      }
    }
    console.log(menus,to)
    console.log('Not Find to Page Redirect to 404 page')
    return false
  }
  return true
}
export default router

路由引入方法

module.exports = file => require('@/views/' + file + '.vue').default

目录结构

最后贴上git地址