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

 

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

 

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

 

 

 

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

 

 

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

 

GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐