[Vue Router warn]: No match found for location with path “xxxxx“

[Vue Router warn]: No match found for location with path “xxxxx“

在vue项目中,大家做权限管理的时候,大部分是采用addRoute方案来实现。

在之前使用vue-router的时候,大家在动态追加完路由后,还要再追加一下404页面,如果在路由文件中直接写好404页面,那么刷新页面的时候就会跳转到404页面,原因在于,我们在加动态路由前,就配置了通配符404路由.改成动态添加过路由后,再最后push一下404通配符,这样就可以了。

路由全局守卫:

javascript">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", 
            ***ponent: () => import("@/views/error/404") 
        })
        next({ ...to, replace: true })
    } catch (error) {
        next(`/login?redirect=${to.path}`)
    }
})

后来vue-router升级,如果还像上面那样动态追加404的话,会有问题:刷新页面,如果当前是动态追加的路由,控制台会报警告:

[Vue Router warn]: 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',
        ***ponent: () => 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就不是空的,就不会报警告了:

转载请说明出处内容投诉
CSS教程_站长资源网 » [Vue Router warn]: No match found for location with path “xxxxx“

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买