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