Problemas al agregar rutas dinámicamente en vue3 [advertencia de enrutador Vue]: no se encontró ninguna coincidencia para la ubicación con la ruta "xxx"

introducción

Recientemente quiero probar vue3 + elementplus + axios + pinia para encapsular una plantilla de backend general. Al agregar enrutamiento dinámico a vue-router, hay un error que no afecta la ejecución del código pero tiene un mensaje, así que lo grabo para facilitar todos para solucionarlo.

Aviso de consola

Las rutas marcadas con un círculo en la imagen son rutas cargadas dinámicamente.

solución

Ya no es necesario colocar páginas de error como 404 después de todas las rutas. Las rutas de las páginas para los informes de errores se pueden definir al principio.

La razón por la cual la página informa un error de que no se puede encontrar la ruta al principio es porque to.matched de la ruta cargada dinámicamente es una matriz vacía durante beforeEach, es decir, aparecerá una página en blanco en el siguiente salto y la ruta se agregará dinámicamente cuando se use addRoute(). Se ha cargado. En este momento, next({ ...to, replace: true }) saltará correctamente, por lo que debe definir la página 404 al principio para evitar que el enrutamiento informando el error de la imagen de arriba.

export const Layout = () => import("@/layout/index.vue");
export const constantRoutes = [
  {
    
    
    path: "/",
    redirect: "/dashboard",
    hidden: true,
  },
  {
    
    
    path: "/login",
    name: "Login",
    component: () => import("@/views/login/index.vue"),
    hidden: true,
  },
  // 404页面
  {
    
    
    path: "/:pathMatch(.*)*",
    component: () => import("@/views/error/index.vue"),
    hidden: true,
  },
  {
    
    
    path: "/dashboard",
    component: Layout,
    redirect: "/dashboard/index",
    hidden: true,
    children: [
      {
    
    
        path: "index",
        name: "Dashboard",
        component: () => 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 accessRoutes: any = await usePermissionStore().getGenerateRoutes();
    accessRoutes.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' });
    }
  }
});

Aviso

En vue2, la ruta: " * " generalmente se usa para capturar todas las rutas. El método de escritura de Vue2 no es compatible con vue3, por lo que debe usar reglas regulares para capturarlo.

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

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

expandir

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

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

Después de hacer clic en cualquier ruta en la administración de usuarios, luego haga clic en cualquier ruta en información personal. Si utiliza el segundo método anterior, el componente de la página de diseño se recargará. ! !