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刷新动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue+ElementUI前端添加展开收起搜索框按钮完整示例
最近一直在用element ui做后台项目,下面这篇文章主要给大家介绍了关于Vue+ElementUI前端添加展开收起搜索框按钮的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
vue-class-setup 编写 class 风格组合式API
这篇文章主要为大家介绍了vue-class-setup 编写 class 风格组合式API，支持Vue2和Vue3，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vuex的使用和简易实现，帮助大家更好的理解和使用vuex，感兴趣的朋友可以了解下2021-01-01
这篇文章，我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。对Vue.js中的computed工作原理感兴趣的朋友跟随脚本之家小编一起学习吧2018-03-03
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
今天小编就为大家分享一篇对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本文为大家介绍Vue中路由的使用方法,包括安装路由创建路由并导出以及在应用实例中使用vue-router的相关知识,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
在vue项目中父子组件间的通讯很方便,但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦,这时使用eventBus通讯,就可以很便捷的解决这个问题,这篇文章主要给大家介绍了关于Vue中事件总线(eventBus)使用的相关资料,需要的朋友可以参考下2022-03-03
在 Vue.js 中,组件是构建应用程序的基本单位,然而,当你的应用程序变得复杂时,组件之间的通信变得至关重要,本文将介绍几种 Vue 组件之间通信的方式,帮助你更好地管理和组织代码,感兴趣的朋友一起看看吧2024-06-06
这篇文章主要介绍了vue监听对象及对象属性问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
随着vue3.4版本的发布,defineModel也正式转正了,它可以简化父子组件之间的双向绑定,是目前官方推荐的双向绑定实现方式,下面就跟随小编一起深入了解一下defineModel的使用吧2024-02-02
最新评论