关于前端:关于vuerouter的No-match-found-for-location-with-path-xxxxx问题记录

在vue我的项目中，大家做权限治理的时候，大部分是采纳addRoute计划来实现。

在之前应用vue-router的时候，大家在动静追加完路由后，还要再追加一下404页面，如果在路由文件中间接写好404页面，那么刷新页面的时候就会跳转到404页面，起因在于，咱们在加动静路由前，就配置了通配符404路由.改成动静增加过路由后，再最初push一下404通配符，这样就能够了。

路由全局守卫：

router.beforeEach(async (to, from, next) => {    ...// 其余逻辑省略，只看addRoutes局部    try {        await store.dispatch('GetUserInfo')        const res = await store.dispatch('getAsyncRoutes')        const asyncRoutes = 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的话，会有问题：刷新页面，如果以后是动静追加的路由，控制台会报正告：

No match found for location with path "xxxxx"

这是因为，咱们刷新页面或者第一次拜访动静的路由，全局守卫beforeEach执行，然而这时候咱们还没有动静追加路由，找不到，而且咱们是后续追加的404，从而导致第一次路由的matched为空，所以就报了这个正告，请看刷新页面后，控制台打印的后果：

解决办法：降级后的vue-router曾经不须要再动静追加404路由了，间接写到初始化的router文件里就好：

router/index.ts:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const routes: Array<RouteRecordRaw> = [    ...// 其余路由省略    {        path: '/:catchAll(.*)',        name: '404',        component: () => import('@/views/error/index.vue')    }]const router = createRouter({    history: createWebHistory(),    routes})export default router

全局守卫：

router.beforeEach(async (to) => {    ...// 其余逻辑省略    try {        await userStore.getUserInfo()        const res: any = await appStore.getAsyncRoutes()        const asyncRoutes = handleRoutes(res)        asyncRoutes.forEach((item) => router.addRoute('layout', item))        return to.fullPath    } catch (error) {        return `/login?redirect=${to.fullPath}`    }})

这样，当刷新页面，第一次走beforeEach的时候，因为还没动静追加路由，会匹配到404，这样matched就不是空的，就不会报正告了：