在vue项目中，大家在管理权限的时候，大多采用addRoute解决方案。之前使用vue-router时，动态添加路由后，需要添加404页面。如果直接在路由文件中写404页面，刷新页面就会跳转到404页面。原因原因是我们在添加动态路由之前配置了通配符404路由。动态添加完路由，然后在最后压入404通配符，就可以了。路由全局守卫：router.beforeEach(async(to,from,next)=>{...//其他逻辑省略，只看addRoutes部分try{awaitstore.dispatch('GetUserInfo')constres=awaitstore.dispatch('getAsyncRoutes')constasyncRoutes=handleRoutes(res)router.addRoutes(asyncRoutes);router.addRoutes({path:"*",name:"404",component:()=>import("@/views/error/404")})next({...to,replace:true})}catch(error){next(`/login?redirect=${to.path}`)}})后来，vue-router升级了，如果还是如上动态添加404，会出现问题：刷新页面，如果当前路由是动态添加的，控制台会报警告：Nomatchfoundforlocationwithpath"xxxxx"这个是因为我们刷新页面或者第一个动态路由被访问了一次，全局守卫执行了beforeEach，但是这个时候我们还没有动态添加路由，找不到，后面加了一个404，导致第一个路由匹配为空，所以报Warning，请看刷新页面后控制台打印的结果：解决方法：升级后的vue-router不再需要动态添加404路由，直接写到初始化路由器文件：router/index.ts:import{createRouter,createWebHistory,RouteRecordRaw}from'vue-router'constroutes:Array<RouteRecordRaw>=[...//其他路由省略{path:'/:catchAll(.*)',name:'404',component:()=>import('@/views/error/index.vue')}]constrouter=createRouter({history:createWebHistory(),routes})exportdefaultrouterglobalguard:router.beforeEach(async(to)=>{...//其他逻辑省略try{awaituserStore.getUserInfo()constres:any=awaitappStore.getAsyncRoutes()constasyncRoutes=handleRoutes(res)asyncRoutes.forEach((item)=>router.addRoute('layout',item))returnto.fullPath}catch（错误）{return`/login?redirect=${to.fullPath}`}})这样在页面刷新的时候，第一次去beforeEach的时候，因为没有动态添加路由，所以会匹配404，所以匹配的不为空，不会有警告：
