Vue3动态路由页面刷新找不到路由空白页面

1.新年的第一天，作为一个刚用VUE3的菜鸟程序员遇到了一个获取用户权限动态路由的问题，如果不跳转刷新页面路由都能正常使用，但是一刷新页面通过  router.addRoute()添加的路由就会缺失，并且报路由找不到的警告。

 

 2.程序员快速解决bug的方法就是找度娘，但是这次度娘好像不给力了，我看到大多数大佬说的就是添加next({...to,replace: true})，我这里也是直接CV大法看问题解决了吗，结果发现还是不行，只要在动态路由上刷新页面就会变成空白页

 

 3.所以我们这采用常规解决问题的办法  console.log()，看看问题出现在什么地方，我发现控制台警告是比我打印前面的，而我打印是在路由守卫打印的，所以那么我们看看哪些地方引用了路由守卫，我的只有入口文件main.js，那么问题应该找到了在main.js中，如有我们在打印一下验证一下猜想。发现确实如此

 

 

 

4.现在我们来看看怎么解决呢， 我的办法就是用async和await调用一次获取动态路由的接口，因为我觉得这个问题应该是在获取动态路由前，vue就把先把路由给注册了所以获取不到，

 

 

5,现在我们看看问题解决了，能在动态路由刷新页面不出现空白页面或者动态路由没有的情况了，感谢看到这里的小伙伴，这是我第一次写文章因为看到度娘上没解决到我的问题，我自己解决了就分享出来看有没有遇到和我同样问题的，我出来工作才半年肯定有什么地方说的不对还请指正，最后麻烦一键三连，如果需要整个动态路由实现的方法也可以私信我，多的发我就发一个完整版的，谢谢