解决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') //这个是我自己的路径
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue3如何实现加载图片时添加一些动画效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2023-10-10
vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法
这篇文章主要介绍了vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2024-03-03
本篇文章主要介绍了vue之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本篇文章主要介绍了Vue.js之视图和数据的双向绑定(v-model)，使用v-model指令,使得视图和数据实现双向绑定，有兴趣的可以了解一下2017-06-06
在本篇文章中小编给大家分享了关于vue源码架构的相关知识点内容，有需要的朋友们学习下。2019-01-01
这篇文章主要给大家分享将 prop 限制为类型列表、默认内容和扩展点、使用引号观察嵌套值、知道何时使用 v-if、单作用域 slot 的简写、有条件地渲染slot等25 个Vue 技巧，下文是下相关资料,需要的朋友可以参考一下2021-11-11
这篇文章主要为大家详细介绍了vue实现实时搜索显示功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
今天小编就为大家分享一篇Vue实例的对象参数options的几个常用选项详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了如何使用WebStorm进行断点调试,包括配置、启动本地应用程序、设置断点以及使用调试工具等步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下2025-02-02
本文主要介绍了Vue.js实现全屏背景图片滑动切换特效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
最新评论