关于前端:关于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 就不是空的，就不会报正告了：