参考链接1：https://blog.csdn.net/qq_31906983/article/details/89054798参考链接2：https://blog.csdn.net/qq_31906983/article/details/88942965思路：不对比路由表在前端是的，后台比较用户的权限，返回一个比较好的路由表给前端，返回的路由表{path:'/people',name:'people',meta:{title:'人口管理',requireAuth:true},component:()=>import('@/views/main/Main'),children:[{path:'/people-list',name:'people-list',meta:{icon:'el-icon-user-solid',title:'PopulationManagement',requireAuth:true},component:()=>import('@/views/people/list')},{path:'/people-detail',name:'people-detail',meta:{requireAuth:true,notCache:true,hideInMenu:true,title:route=>`PopulationDetails-${route.query.xm}`},组件：()=>import('@/views/people/detail')}]}functionfilterRouter(routes){constrouter=routes.map(route=>{if(route.component==='主要'){route.component=_import('/main/Main')}else{route.component=_import(route.component)}if(route.meta.routeTitle){route.meta.title=_title(route.meta.title,route.meta.routeTitle)}if(route.children&&route.children.length>0){route.children=filterRouter(route.children)}returnroute})returnrouter}这个函数的主要作用是将字符从将背景字符串组件转换为真实组件。_import()函数的定义如下：function_import(file){return()=>import('@/views'+file+'.vue')}function_title(title,routeTitle){returnroute=>`${title}${route.query[routeTitle]}`}使用router.onReady调用获取的动态路由router.onReady(()=>generateRoutes())functiongenerateRoutes(){letvueMenus=localStorage.vueMenusif(vueMenus){vueMenus=JSON.parse(vueMenus)constfilterRoutes=filterRouter(vueMenus)//console.log('filterRoutes',filterRoutes)filterRoutes.map(item=>{//console.log('item',项目）router.addRoute(item)})router.addRoute({path:'*',meta:{hideInMenu:true},component:_import('/main/NotFound')})router.options.routes=router.options.routes.concat(filterRoutes)//console.log(router.options.routes)}}然后更新发现用上面的之后，刷新页面是空白的。所以直接改【参考链接2】使用vuexstore/module/routeList.jsimportrouterfrom'@/router/index'import{filterRouter}from'@/libs/util'exportdefault{state:{routeList:[]},突变：{setRouteList（状态，列表）{constvueMenus=列表||[]if(vueMenus.length>0){vueMenus.push({path:'*',meta:{hideInMenu:true},component:'/main/NotFound'})constfilterRoutes=filterRouter(vueMenus)filterRoutes.map(item=>{router.addRoute(item)})state.routeList=vueMenus}}},actions:{setRouteListByLocal({commit}){returnnoewPromise((resolve,reject)=>{Api.setVueMenu().then(res=>{if(res.code==='C10000'){commit('setRouteList',res.data)resolve(res)}else{reject(res)}}).catch(err=>{reject(err)})})}}}router/index.jsrouter.beforeEach((to,from,next)=>{if(!tokenjudgement){next('/login')}else{if(store.state.routeList.routeList.length===0){//重置路由开始constnewRouter=newVueRouter({mode:'history',base:process.env.BASE_URL,routes})router.matcher=newRouter.matcher//重置路由结束store.dispatch('setRouteListByLocal').then(()=>{next({path:to.path})console.log(store.state.routeList.routeList)})}else{next()}}})菜单使用this.menuList=store.state.routerList.routerList退出时需要清空this.$store。状态.routeList.routeList
