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刷新动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了如何使用Vue2实现简单的购物车功能,文中有相关的代码示例,对我们的学习或工作有一定的帮助,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了Vue实现背景更换颜色操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
这篇文章主要介绍了使用vue框架 Ajax获取数据列表并用BootStrap显示出来,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了vuejs实现下拉框菜单选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
组件又分为非单文件组件和单文件组件，一般常用的就是单文件组件，这篇文章主要介绍了vue组件非单文件组件的使用步骤,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue + electron应用文件读写操作,如果要制作的应用并不复杂，完全可以将数据存储在本地文件当中，然后应用就可以通过这些文件进行数据的读写，需要的朋友参考下吧2022-06-06
这篇文章主要介绍了vue draggable组件实现拖拽及点击无效问题的解决,只需要在设置handle属性就可以了，.defaultTypeTag 是要拖拽的块的类名，要注意的是需要做点击事件的项不能包含在这个类名里面，不然会无法触发点击事件，详细解决办法跟随小编一起学习吧2022-05-05
这篇文章主要为大家详细介绍了vue.js开发环境的安装教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
前些日子了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,所以下面这篇文章主要给大家介绍了关于vue中如何利用mqtt服务端实现即时通讯的相关资料,需要的朋友可以参考下2021-07-07
最新评论