解决Vue3.0 页面刷新 [Vue Router warn]: No match found for location with path 警告

VUE3中路由采用动态加载的模式下,当我们在当前页面刷新浏览器时,会出现一个警告
[Vue Router warn]: No match found for location with path
警告的意思是提示当前路由并不存在,刷新时此路由确实不存在,因为在路由鉴权中beforeEach时,动态路由并未加载。
虽然,我们添加了动态路由后再 replace: true 跳转一次,但这个警告每次看到就难受。

那么处理的方式分为2个步骤:
1、我们在router/index.js 中:

const { name } = router.currentRoute.value
if (!name) {
    router.addRoute({
        path: window.location.pathname,
        name: 'TempRoute',
        component: () => import('@/components/layouts/emptyLayout.vue')
    })
}
export default router

2、在路由鉴权中router/routeAuth.js 在后端返回动态路由并addRoute之后添加以下代码:

// 授权成功执行以下代码
// 存在临时路由则先删除临时路由
const tempRoute = router.hasRoute('TempRoute')
if (tempRoute) router.removeRoute('TempRoute')
const { accessedRoutes, defaultRoute } = await store.dispatch('routes/setAsyncRoutes', { loading: false })
accessedRoutes.forEach(route => router.addRoute(route))
if (to.path === '/' && defaultRoute && defaultRoute.path !== '/') {
    return next({ path: defaultRoute.path, replace: true })
}
// 此时已添加了后端返回的动态路由,进行跳转一次
if (tempRoute) {
    // 此处 next 里就不可用 ...to,因为 to 是临时路由
    next({ path: to.path, query: to.query, replace: true })
} else {
    next({ ...to, replace: true })
}
  • 16
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
当出现"[Vue Router warn]: No match found for location with path "/" "这个警告时,它意味着当前路由中没有与该路径匹配的路由。这通常是因为刷新浏览器时,动态路由尚未加载的原因。为了解决这个问题,我们可以采取以下两个步骤: 步骤1:在router/index.js文件中,我们可以添加一个临时路由来处理当前路径的匹配问题。具体做法是: const { name } = router.currentRoute.value if (!name) { router.addRoute({ path: window.location.pathname, name: 'TempRoute', component: () => import('@/components/layouts/emptyLayout.vue') }) } 这样,在刷新浏览器时,就会在路由中添加一个临时的路由来匹配当前路径。 步骤2: 确保在导出router实例之前,将临时路由添加到路由中。例如: export default router 通过以上两个步骤,我们可以解决"[Vue Router warn]: No match found for location with path "/" "这个警告,并且在刷新浏览器时正确地匹配相关的路由。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3 addRoute 动态路由 页面刷新后 路由失效 [Vue Router warn]: No match found for location with path](https://blog.csdn.net/weixin_43835425/article/details/116708448)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [解决Vue3.0 页面刷新 [Vue Router warn]: No match found for location with path 警告](https://blog.csdn.net/maoeye283301717/article/details/126482974)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值