问题：预期的动态路由结果被404静态路由提前匹配

问题：预期的动态路由结果被404静态路由提前匹配

如果你的未定义路由匹配规则（如 /:pathMatch(.)）在静态路由表中并且优先级较高，那么它可能会在动态路由被正确添加之前拦截导航，导致动态路由无法正常生效。

要解决这个问题，可以采取以下方法调整路由匹配顺序：

解决方案：

1. 将未定义路由规则放在路由表的最后

/:pathMatch(.) 是一个广义匹配规则，应该放在所有路由规则的最后，以确保其他更具体的路由规则优先匹配。

在静态路由中调整顺序：

const staticRoutes = [{
        path: "/",
        name: "Home",
        component: () => import("@/views/Home.vue"),
    },
    // 其他静态路由...
    {
        path: "/:pathMatch(.*)*",
        name: "NotFound",
        component: () => import("@/views/error/404.vue"),
    },
];

动态路由添加时，将其插入到未定义路由规则之前：

const async_router_data = store.getters["permission/async_router"];
router.options.routes = [
    ...staticRoutes.filter(route => route.name !== "NotFound"),
    ...async_router_data,
    staticRoutes.find(route => route.name === "NotFound"),
];

async_router_data.forEach((item) => {
    router.addRoute(item);
});

2. 动态延迟挂载未定义路由 在动态路由加载完成后再添加未定义的 /404 路由，确保其不会抢先匹配。

store.dispatch("permission/getRouterAction").then(() => {
    const async_router_data = store.getters["permission/async_router"];

    async_router_data.forEach((item) => {
        router.addRoute(item);
    });

    // 动态路由添加完成后再挂载 NotFound
    router.addRoute({
        path: "/:pathMatch(.*)*",
        name: "NotFound",
        component: () => import("@/views/error/404.vue"),
    });

    next({
        ...to,
        replace: true
    });
});

总结

• 确保 /404 未定义路由的匹配规则在路由表的最后。
• 动态路由添加完成后再挂载 /404。
• 使用路由守卫拦截未匹配路由，优先加载动态路由。
• 通过以上调整，可以有效避免 /404 提前匹配的问题。