为什么不贴代码详细说而是只讲思路呢——对，因为我懒……实际上动态菜单和动态路由的思路还是比较简单的，只是平日只在路由文件里配静态路由什么都不需要多考虑的，一上来可能会有点懵逼，当然这里边也多少有点小坑，下边会提到。
路由配置文件
vue-cli创建的项目，路由的配置文件在src/router/index.js，在配置静态路由的时候只需要写好路由的名称、路径和从属关系（children）等，然后new Router-->export完事儿。
那么如果做过登录状态验证之类的功能，你应该会用过router.beforeEach这个导航守卫，没用也没关系，下面我们来认识一下：
/*** to:即将进入的路由对象* from:正在离开的路由对象* next:用来执行下一步操作，导航守卫内要保证next被调用* （next方法内参数不同会导致不同的行为）*/router.beforeEach((to, from, next) => {...})
于是在每一次进行路由跳转的时候，这个导航守卫内的代码就会运行一次，那么显然，在登录成功并向首页跳转的时候，就是我们去获取并创建动态路由和菜单的时候。
动态菜单/路由数据的获取创建，无非就是按照项目里菜单/路由的结构，把静态的数据变成动态生成而已，这里可能会有个几层的嵌套但是思路上没什么可讲的。
判断的思路也很简单，我们在获取并处理完路由的时候将路由配置和菜单对象存到sessionStorage，并把这两个存储值作为判断登录状态的依据即可。
那么在路由跳转的过程中，通过sessionStorage.getItem()获取存储值，整个判断一般分这么几种情况：
值存在则表示是已登录状态下正常跳转值不存在则表示是正在登录/需要获取权限在退出登录、登录失效回到登录页时要清除这些存储值，并重置路由（下边会说）
坑
具体想看代码的可以去搜其他的帖子，嗯很多。这里只讲一下可能会碰到的坑：
导航守卫进入死循环的bug：在导航守卫的代码中一定要有一个条件分支下是next()不带任何路径作为参数的，比如在登录状态下的正常跳转，请直接next()，这是进行管道中的下一个钩子，也就是说下一步就是完成跳转动作了；而比如next('/')或next({ path: '/' })这样的代码会重新进行一次路由跳转，每这样调用一次就会重新跳路由，明白了吗，没有出口，无限循环，而next()就是那个出口，请务必调用它。退出->用不同权限的账号登录->bug：这种情况下菜单是正常的，但是菜单下的默认页却会莫名其妙的重复上一个账号的路径，这就是路由没有重置造成的问题。
例如：菜单A下有a1、a2、a3三个页面，管理员用户有所有权限，他去菜单A的默认页面是a1，即菜单A对应的路由的redirect指向了a1，普通用户只有a3页面的权限，但是在登录时由于路由并未完全重置，点击菜单A的时候页面仍然跳到了a1页面。
分析：我们用addRoutes添加了新路由，却并不能直接删掉已添加的路由，退出->跳到登录页本质上也是一次普通的页面跳转，之前登录用户生成的路由配置并没有被清除/替换，router.addRoutes()没用，router.options.routes=XXX也不好使，你会去查vue-router的API想看有没有删除/重置/替换路由的办法，结果只能吐槽一句这个简单到令人发指的文档…
解决：实际上解决的办法，很简单，只是文档里你可能找不到= =！下边贴一下解决问题的代码，只贴必要的部分，只需要在跳转到登录页的时候运行即可。请记住这个matcher:
const newRouter = new Router(...); // 创建一个新的、干净的路由router.matcher = newRouter.matcher; // router就是真·路由啦，当然重点是这个macther
好了，坑介绍完了，此文对想直接拷代码的盆友可能不太友好，想拷/看详细代码可以去看其他的文了，还是好找的。只要注意避让这两个坑，就应该不会有什么大问题啦！
最后的最后，祝大家写表单/表格愉快！[狗头]
如果觉得《Vue 动态路由和权限菜单的实现思路》对你有帮助，请点赞、收藏，并留下你的观点哦！
