vue3 vue-router4 报错 No match found for location with path

  • Z时代
  • 2024-02-28
  • 分类：IT

如图，我猜测是路由跳转的时候，还没有注入响应的路由，然后第二次访问时已经生成好路由了。
虽然可以正常访问页面，但这个报错看着很不舒服，下面是我的代码，希望大神看看哪里写的有问题
vue3 vue-router4 报错 No match found for location with path

//路由完全注册标识
let routeFlag = false
router.beforeEach((to, from, next) => {
    const hasToken = localStorage.getItem('token')
    if (hasToken) {
        if (routeFlag) {
            next()
        } else {
            // 注册动态路由
            store
                .dispatch('userModule/ASYNC_ROUTER')
                .then(() => {
                    genRouteConfig().then(() => {
                        routeFlag = true
                        next({ ...to, replace: true })
                    })
                })
                .catch(() => {
                    localStorage.removeItem('token')
                    next(`/login?redirect=${to.path}`)
                })
        }
    } 
//动态生成路由
const genRouteConfig = () => {
    const getMenus: newMenustype = store.getters['userModule/getMenus']
    return new Promise((resolve, reject) => {
        router.addRoute({
            path: '/:catchAll(.*)',
            redirect: '/404',
            name: 'NotFound'
        })
        for (let key in getMenus) {
            let menusObj = getMenus[key]
            const routerObj: RouteRecordRaw = {
                path: '/' + menusObj.name,
                name: menusObj.name,
                component: () => import('@/views/homepage/homepage.vue'),
                children: []
            }
            if (menusObj.children) {
                routerObj.redirect = `/${menusObj.name}/${menusObj.children[0].name}`
                for (let i = 0; i < menusObj.children.length; i++) {
                    let menuName: string = menusObj.children[i].name
                    if (routerObj.children) {
                        routerObj.children.push({
                            path: menuName,
                            name: menuName,
                            component: modules[`./views/${menusObj.name}/${menuName}.vue`]
                        })
                    }
                }
            }
            router.addRoute(routerObj)
        }
        resolve(true)
    })
}

回答：

如果当前路由是动态追加的，beforeEach 第一次执行的时候，这个路由还没追加进去，那么路由的 matched 为空，就会报这个警告。
解决办法，在 router/index.ts 文件里，也就是初始化路由的文件里，注册好 404 路由，这样第一次执行 beforeEach 的时候匹配不到路由，就会匹配已经有的 404 路由，matched 里就不是空的了，就没有警告了。

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(process.env.BASE_URL),
    routes
})
export default router

回答：

遇到同样的问题求解答，会有警告但是之前的页面也会被销毁，不在缓存

以上是 vue3 vue-router4 报错 No match found for location with path 的全部内容， 来源链接： utcz.com/p/937534.html

回到顶部