由于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"),
    },
  ],
});
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐