开发人员从internet上查找了一个简单的框架，auth的配置决定了哪些权限进入哪个页面。 具体操作是登录以获取用户权限，遍历本地总路由表以匹配权限，并返回当前用户有权访问的路由表。 internet上的大多数方案都是从后端接口获取权限和路由表。 这是两者的区别，但不影响填孔方案的可行性
如果保留了本地总路由表部分的代码，则该表将根据权限进行进一步的遍历过滤，并以硬编码方式写入项目中。 在auth[]内可以使用数字，也可以使用中文，还可以使用单词
const routerList=[{ path: '/'，component: Layout，redirect: '/dashboard '，auth : [ 0，1，2 ]，元： children : [ { path : ' dashboard '，name: 'Dashboard '，component: ()=import meta:(title: ) ]顶级电脑path: )/enterprises )，common name: 'Enterprises '，redirect: 'noRedirect '，auth : [ 0，1，2 ]，meta 3360 icon : } children : [ { path :’huanjingjiance’，name :’huanjingjiance’， 组件： (]=import (@/views/enews2)、meta:(title: )环境监测(、(}、) path: )/user、component redirect 1)、meta:(title: )人员信息)、icon : (El-icon-user )、children: )、path : (index )、name3360 name3360 ) in dren component 3360 (=import (' @/views/user/index ' )、meta: ) title: (个人信息)、auth: (，0，0
constconstantroutes=[ { path : '/log in '，component: ()=import('@/views/login/index ' )， 隐藏： tter .动态路由器(varcreaterouter=()=newrouter ) mode:'history '，scrollBehavior: )=() 登录完成，动态获取路由。 这里的逻辑是获取用户权限id，并通过filterRouter方法遍历和获取当前权限路由表。 虽然看到很多博客写了router.add routes (动态路由器)，但在实际开发过程中，登录后进入主页是一个白色的屏幕，最终达到router.options.routes = dynamicRouter;
导出函数resetrouter (角色类型) { const newRouter=createRouter ) router.matcher=new router.matcher； //从接口动态获取路由表后，可以跳过此步骤的动态路由器=过滤器路由器(路由器列表，角色类型)； router.options.routes=动态路由器； router.add routes (动态路由器； store.dispatch (动态路由器/动态路由器)、动态路由器)； } exportfunctionfilterrouter (allrourer， roleType ) constres=allrourer.filter (item={ return item.auth.index of ) )、return item.au=-1 } (return item )
router在根保护的router.beforeEach中为空，需要再次添加路径。 在此，通过判断Vuex中是否保存有动态路由器路由表，来决定是否需要重新添加路径。 如果不写store.dispatch(‘dynamicRouter/dynamicRouter’, dynamicRouter);，就表示总是运行死循环，需要注意。 在这里引用其他博客形象的说明，说明为什么一直在else中奔跑。 原文《VUE 路由守卫 next() / next({ …to, replace: true }) / next(‘/‘) 说明》
addRoutes () )之后添加了addRoutes () )的路由，因此访问了addRoutes () )之后添加的路由，但此时addRoutes ) )的执行尚未结束因此，必须从新访问进行路由。
我该怎么解决这个问题？
此时，请使用addRoutes(…to，replace: true } )验证在addroutes ) )时动态添加的路由是否已完全加载。
next({ …to，replace: true }中的replace: true是一条设置信息，它告诉VUE在执行此操作后，无法使用浏览器上一步按钮返回到上一个根。
因此，next(…to，replace: true } )可以写为next )…to )，但addRoutes ) )尚未完成时，单击浏览器上的后退按钮即可完成任务
其实next(…to ) )的执行很简单，它可以判断：
如果在参数to中找不到对应的路由，请再次运行beforeeach ()、from、next，直到找到其中的next({ …to}对应的路由。
也就是说，在该时刻addRoutes ()已经完成，所以在找到对应的路由后，为了执行下一个朝向对应的路由的beforeeach )、from、next，这次是朝向对应的路由的beforeeach )
综上所述，我觉得如果我不写store.dispatch(‘dynamicRouter/dynamicRouter’, dynamicRouter);，就一直呆在else里，加载路由表也没用
if (store.getters.dynamic router.length0({ next ) )； }还可以根据} else {//权限从后端接口获取vardynamicrouter=过滤器路由器(路由器列表，角色类型)。 重新运行beforeEach时防止死循环的store.dispatch (动态路由器/动态路由器)、动态路由器)； router.options.routes=动态路由器； router.add routes (动态路由器； next(…to，replace: true} )； }结束兼职，祝大家上线顺利，工作愉快！