routes - Quasar 路线与登录页面不匹配

Question

我第一次尝试使用 Quasar 来构建 SPA。我的路由器有问题。我已经在 src/pages/LoginPage.vue 中构建了一个简单的登录页面，然后将适当的路由对象添加到 src/router/routes.js

const routes = [
  {
    path: "/login",
    component: () => import("pages/LoginPage.vue"),
  },
  {
    path: "/",
    component: () => import("layouts/MainLayout.vue"),
    children: [{ path: "", component: () => import("pages/IndexPage.vue") }],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: "/:catchAll(.*)*",
    component: () => import("pages/ErrorNotFound.vue"),
  },
];

export default routes;

我保留src/router/index.js由quasar-cli生成的方式。

然后我尝试在浏览器中打开 http://localhost:9000/login。

预期结果

页面加载时以LoginPage作为内容。 URL 栏显示预期地址，或者可能添加尾部斜杠。

实际结果

地址被重定向到 http://localhost:9000/login#/ 或 http://localhost:9000/login/#/，具体取决于是否或不是在输入时添加尾部斜杠。

Page 显示 /(包裹在 MainLayout 中的 IndexPage)。

其他信息

» Dev mode............... spa
» Pkg quasar............. v2.10.0
» Pkg @quasar/app-vite... v1.1.3

Answer 1

我认为您需要更改vueRouterMode。所以默认它是哈希值。

在quasar.config.js

将其更改为历史记录。

vueRouterMode: 'history'

然后，如果您点击http://localhost:9000/login，它将进入登录页面，对于http://localhost:9000/，它将打开索引页面。