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

由于vue3的动态路由问题导致刷新完页面会爆出[Vue Router warn]: No match found for location with path "xxx"问题，虽然不影响功能但非常影响心情，解决半天解决不掉，我也是找了好久解决方案，突然由次看到linkadmin的动态路由没有该问题，于是研究之后发现必须在路由注册时候添加好路由守卫功能

代码如下

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

完整路由代码如下

剩余就在路由拦截时候

import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL), // 有些特殊情况配置了base刷新时候不加env会可能导致刷新直接进入404页面
  routes: [
    {
      path: "/:pathMatch(.*)*", // 解决路由爆[Vue Router warn]: No match found for location with path
      meta: {
        title: "找不到此页面",
      },
      // redirect: '/403', // 错误方式，刷新立马会导致进入守卫的页面
      component: () => import("@/views/error/404.vue"), // 切记不要使用 redirect: '/403',
    },
    {
      path: "/403",
      meta: {
        title: "权限不足",
      },
      component: () => import("@/views/error/403.vue"),
    },
  ],
});

这篇好文章是转载于：学新通技术网