vue3 中动态添加路由出现的问题 [Vue Router warn]: No match found for location with path “xxx“

引言

最近想尝试 vue3 + elementplus + axios + pinia 封装一个通用的后台模板,写到 vue-router 添加动态路由时,有一个不影响代码运行但是又有提示的报错,因此进行记录,方便大家进行解决

控制台提示


图片圈出的路由是动态加载的路由

解决方案

404等报错页面不再需要放在所有路由后面,可在一开始的时候就定义好报错跳转的页面路由。

页面之所有一开始报错找不到路由,是因为动态加载的路由在 beforeEach 的时候 to.matched 为空数组,即此时 next 跳转则会出现空白页面,之后使用 addRoute() 时动态添加的路由已经被加载上去,此时 next({ …to, replace: true }) 就跳转成功,所以需要在一开始先定义好 404 页面,防止路由报上面图片的错误

export const Layout = () => import("@/layout/index.vue");
export const constantRoutes = [
  {
    path: "/",
    redirect: "/dashboard",
    hidden: true,
  },
  {
    path: "/login",
    name: "Login",
    ***ponent: () => import("@/views/login/index.vue"),
    hidden: true,
  },
  // 404页面
  {
    path: "/:pathMatch(.*)*",
    ***ponent: () => import("@/views/error/index.vue"),
    hidden: true,
  },
  {
    path: "/dashboard",
    ***ponent: Layout,
    redirect: "/dashboard/index",
    hidden: true,
    children: [
      {
        path: "index",
        name: "Dashboard",
        ***ponent: () => import("@/views/dashboard/index.vue"),
      },
    ],
  },
];

export default router;
import router, { resetRouter } from './router';
import { getToken } from '@/utils/sessionStorage';
import { usePermissionStore } from '@/store/permission';

// 判断是否初次或者刷新页面 0表示初次
let isRequest = 0;

router.beforeEach(async (to, _from, next) => {
  async function init () {
    // 调用方法获取路由
    const a***essRoutes: any = await usePermissionStore().getGenerateRoutes();
    a***essRoutes.forEach((route: any) => {
      router.addRoute(route);
    });
    isRequest = 1;
  }

  // 判断条件根据项目更改
  if (getToken()) {
    if (to.path === '/login') {
      next({ path: '/' });
    }
    if (isRequest) {
      next();
    } else {
      await init();
      next({ ...to, replace: true });
    }
  } else {
    sessionStorage.clear();
    isRequest = 0;
    if (to.path === '/login') {
      next();
    } else {
      resetRouter();
      next({ path: '/login' });
    }
  }
});

注意

vue2 中 通常使用 path: " * " 捕获所有路由,vue3 中不支持 vue2 的写法,需要用正则来捕获

1. /:pathMatch(.*)*  
2. /:pathMatch(.*)

上面两个的区别在于 如果省略最后一个'*'在解析或推送时将对params中的'/'字符进行编码

拓展

export const Layout = () => import("@/layout/index.vue");

// vue3 中,当有使用到动态加载路由的情况,使用这种方式引入会出现点击每个大导航栏,Layout 重新加载的情况,因此需要改成上面的写法
import Layout from "@/layout/index.vue";


点击用户管理中的任意路由之后,再点击个人信息中的任意路由,如果使用上面第二种写法,就会出现 Layout 页面组件重新加载!!!

转载请说明出处内容投诉
CSS教程_站长资源网 » vue3 中动态添加路由出现的问题 [Vue Router warn]: No match found for location with path “xxx“

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买