这篇文章主要讲解了“vue-router4动态路由刷新404或白屏怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue-router4动态路由刷新404或白屏怎么解决”吧！
vue3+vue-router4+vuex4+vite实现动态路由的时候，出现刷新404或者空白
动态路由的实现：
1、在项目一开始，通过createRouter创建路由的时候，使用路由实例（通常有404、login等）。
2、登录成功后，通过后台接口获取后端配置的路由，然后addRouter，并将路由存至vuex内。
3、路由跳转，通过beforeEach路由导航守卫进行跳转前的监听，判断是否有本地路由（vuex）,如果没有，通过接口获取后端配置的路由，然后addRoute路由。
但遇见问题了：跳转至某个页面后，刷新404
第一步配置静态路由的是，将不匹配地址同意导航到404页面了，代码如下
{
// 找不到路由重定向到404页面
path: "/:pathMatch(.*)",
component: Layout,
redirect: "/404",
hideMenu: true
},这就导致在动态权限添加路由的时候，所加的权限路由在使用地址匹配是都会被拦截到404页面。输入网址导航会，刷新页面会，在页面中通过点击等方式直接触发的路由不会出现404。
所以将此路由（404）从静态路由表去除，放到动态权限路由获取后再addRouter。
但是，当刷新页面时，会出现白屏
提示没有匹配到相应路径，也就是说路由还没加上。仔细查看vue-router官方API，有一个提示
而在代码中，router.addRoute的触发是在路由导航守卫中检测到当前未保存动态菜单信息（vuex）。在这之后用next()放行，而根据官方提示和控制台相关打印信息可以看到，warn提示在addRouter添加路由之前，所以解决方法是将next()改为next(to)，触发新的一个导航，此时可以正确匹配到动态路由的相应地址。
感谢各位的阅读，以上就是“vue-router4动态路由刷新404或白屏怎么解决”的内容了，经过本文的学习后，相信大家对vue-router4动态路由刷新404或白屏怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
