温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue-router4动态路由刷新404或白屏怎么解决

发布时间:2023-04-13 16:32:55 来源:亿速云 阅读:203 作者:iii 栏目:开发技术

这篇文章主要讲解了“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,有一个提示

vue-router4动态路由刷新404或白屏怎么解决

而在代码中,router.addRoute的触发是在路由导航守卫中检测到当前未保存动态菜单信息(vuex)。在这之后用next()放行,而根据官方提示和控制台相关打印信息可以看到,warn提示在addRouter添加路由之前,所以解决方法是将next()改为next(to),触发新的一个导航,此时可以正确匹配到动态路由的相应地址。

感谢各位的阅读,以上就是“vue-router4动态路由刷新404或白屏怎么解决”的内容了,经过本文的学习后,相信大家对vue-router4动态路由刷新404或白屏怎么解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI