问题描述
通过点击菜单访问我们动态添加的路由是没有问题的
如果是强制刷新浏览器,此时,控制台会友好的提示:[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')
}
]
转自:关于 [Vue Router warn]: No match found for location with path 的解决方法-慕课网