首先你要排除你的路由没有以下问题

  1. name重复
  2. 嵌套路由子路由多了’/’

话不多说直接上思路及解决方案

问题: 动态加载路由router.addRoute(xx); 进入目标页面, 控制台报警告:No match found for location with path “/home”

原因: 当前路由为根据权限动态添加的, 所以beforeEach第一次执行的时候, 当前路由还没追加进去, 就会报这个警告

解决方案:
在默认路由中添加下面代码即可

	const routes = [
	    {
	        path: '/:catchAll(.*)',
	        component: () => import('@/views/error/404.vue'),
	    },
	];
	const router = createRouter({
	    history: createWebHistory(),
	    routes
	})

说明:加上这个404页面,当目标页面找不到的时候这个页面会承接一下。不过不用担心,路由不会真的跳转到这个页面。beforeEach 的时候,在next执行前就将获取到的目标路由传进去了,所以还没来得及跳转404就找到正确页面了

更多推荐