解决Vue3.0刷新页面警告[Vue Router warn]:No match found for location with path /xxx
更新时间：2024年03月07日 09:44:41 作者：进击的potato
这篇文章主要介绍了解决Vue3.0刷新页面警告[Vue Router warn]:No match found for location with path /xxx问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
出现这个问题是因为
当我们在使用vue-Route4.0以前的版本的时候，我们采用的404错误页面的路径，是用router.addRoutes或者push动态添加进去的
但是vue-Route4.0版本更新以后，刷新页面或者第一次访问动态的路由，全局守卫beforeEach执行
但是这时候我们还没有动态追加路由，找不到，而且我们是后续追加的404，从而导致第一次路由的matched为空
控制台打印结果：
vue-Route4.0版本已经不需要我们去动态添加404路由了
直接在router/index.ts文件中添加一个404路由即可，使用通配符匹配。
值得注意的是
添加的路由不要加上name：’404‘
这样刷新后会跳转至404页面，不会留在刷新前的页面。
{
path: '/:catchAll(.*)',
// name: 'TempRoute', // 这里不要加
hidden: true,
component: () => import('@/views/error/404.vue') //这个是我自己的路径
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇博客针对axios库的核心代码做一个简要总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了通过图带你深入了解vue的响应式原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，2019-06-06
详解vue中使用express+fetch获取本地json文件
本篇文章主要介绍了详解vue中使用express+fetch获取本地json文件，非常具有实用价值，需要的朋友可以参考下2017-10-10
element编辑表单el-radio回显之后无法选择的问题解决
今天主要来谈一下element-ui编辑表单中的el-radio回显之后无法选择的问题，主要涉及到vue的双向绑定，以及element-ui编辑表单中的el-radio的默认类型，感兴趣的可以了解一下2021-08-08
由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的,这篇文章主要介绍了导致VUE页面不刷新的问题分析及解决方法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Vue项目引入PWA的步骤，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-04-04
vue经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻更快,使⽤起来更加⽅便,下面这篇文章主要给大家介绍了关于vue3.0和vue2.0区别的相关资料,需要的朋友可以参考下2023-10-10
本文主要介绍了手摸手教你实现Vue3 Reactivity，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vue顶部菜单栏实现小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue 音乐App QQ音乐搜索列表最新接口跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
最新评论