vue3 No match for

引用\[1\]:在Vue3中，当使用动态路由时，刷新页面后可能会出现警告信息\[Vue Router warn\]: No match found for location with path "xxx"。虽然这个问题不会影响功能，但会对心情产生一定的影响。解决这个问题需要在路由注册时添加路由守卫功能。具体的代码如下：

{
  path: "/:pathMatch(.*)*",
  component: () => import("@/views/error/404.vue"),
}

完整的路由代码如下：

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: \[
    {
      path: "/:pathMatch(.*)*",
      meta: { title: "找不到此页面" },
      component: () => import("@/views/error/404.vue"),
    },
    {
      path: "/403",
      meta: { title: "权限不足" },
      component: () => import("@/views/error/403.vue"),
    },
  \],
});

export default router;

引用\[2\]:在Vue3中，使用动态加载的路由模式时，当我们在当前页面刷新浏览器时，会出现警告信息\[Vue Router warn\]: No match found for location with path。这个警告的意思是提示当前路由并不存在，因为在路由鉴权中的beforeEach函数中，动态路由并未加载。虽然我们可以在添加动态路由后使用replace: true进行一次跳转来解决这个警告，但每次看到这个警告还是会感到不舒服。\[2\]
引用\[3\]:在路由鉴权中，当后端返回动态路由并添加到路由中后，可以在添加路由后进行一次跳转来解决这个问题。具体的代码如下：

// 授权成功执行以下代码
// 存在临时路由则先删除临时路由
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({ path: to.path, query: to.query, replace: true })
} else {
  next({ ...to, replace: true })
}

以上是解决Vue3中动态路由刷新页面出现"No match found for location with path"警告的一种方法。\[3\]
#### 引用[.reference_title]
- *1* [完美解决Vue3 页面刷新 [Vue Router warn]: No match found for location with path 警告](https://blog.csdn.net/weixin_45952652/article/details/131192829)[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^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *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^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]