关于 [Vue Router warn]: No match found for location with path 的解决方法

Question

问题描述

通过点击菜单访问我们动态添加的路由是没有问题的
如果是强制刷新浏览器，此时，控制台会友好的提示：
[Vue Router warn]: No match found for location with path ‘xxx’ 的警告

分析

我在排除其他可能导致这种错误后，最终将问题定位到添加的 router.beforeEach 路由守卫上。这是因为强制浏览器刷新，路由又访问的是动态添加的路由，此时，进入路由守卫后未找到对应的路由记录所导致的

// 强制浏览器刷新，访问动态路由（/user/manage），进入路由守卫，
router.beforeEach((to) => {
  console.log(to.matched) 
  // 动态路由表还未添加，匹配到的是 [] 的路由记录，控制台提示警告，当后继添加完动态路由后正常显示路由视图组件
  ...
}

解决

只需要在公有的路由表最后添加段代码即可
找到路由配置文件，我的路径是src/router/index.js

const publicRoutes = [
	...
	{
	    path: '/:pathMatch(.*)*',
	    component: () => import('@/views/error-page/404')
	}
]