Vue3 Quasar框架路由异常求助：所有路径均跳转至首页

问题原因 #

你当前的路由配置中，父路由的path设置为""，这会导致Vue Router的嵌套路由匹配逻辑出现异常。空字符串的父路由会被视为相对路径起点，当访问/auth这类子路由路径时，无法正确匹配到对应的子路由组件，最终 fallback 到了默认的子路由（path: ""的首页）。

解决方案 #

修改父路由路径 #

将父路由的path从""改为"/"，明确指定根路径作为嵌套路由的基础路径，这样子路由的匹配逻辑会恢复正常：

const routes = [
  {
    path: "/", // 修改为根路径
    component: () => import("layouts/MainLayout.vue"),
    props: true,
    children: [
      {
        path: "auth",
        name: "auth",
        component:  () => import("pages/AuthPage.vue"),
      },
      {
        path: "",
        name: "home",
        component: () => import("pages/HomePage.vue"),
      },
    ],
  },
  // 404路由保持不变
  {
    path: "/:catchAll(.*)*",
    component: () => import("pages/ErrorNotFound.vue"),
  },
];
export default routes;

额外检查项 #

• 检查项目中是否存在全局导航守卫（如router.beforeEach），如果有强制跳转首页的逻辑，需要调整规则，允许/auth路径正常访问。
• 若使用history路由模式，需确保服务器配置了正确的 fallback 规则（不过这不是当前跳转异常的直接原因）。

内容的提问来源于stack exchange，提问作者Valor Hec07