类星体路由与登录页面不匹配

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;

我以quasar-cli生成的方式离开src/router/index.js。

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

预期结果

以LoginPage为内容加载页面。URL栏显示想要的地址，或者可能添加了一个尾部斜杠。

实际结果

地址被重定向到http://localhost:9000/login#/或http://localhost:9000/login/#/，这取决于您在键入时是否放入尾部斜线。

页面显示的是/(IndexPage封装在MainLayout中(。

其他信息

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

Answer 1

我认为您需要更改vueRouterMode。所以默认情况下它将是hash。

在quasar.config.js中

将其更改为历史。

vueRouterMode: 'history'

然后如果你命中http://localhost:9000/login它只会转到登录页面http://localhost:9000/它将打开索引页。

Answer 2

• Vue路由器的默认模式始终是哈希模式，它在URL后面附加一个哈希(#(，这样当URL更改时页面就不会被重新加载，它只是重新发送页面，而不是向服务器发出请求。

• 我在你的代码中看到了后退路线的方向：

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

因此您可以放心使用历史模式。如果输入的URL与上载到服务器的任何静态资产不匹配，则重定向到ErrorNotFound页面。

在Quasar中，此配置在文件quasar.config.js中完成，您只需要将vueRouterMode属性修改为history(默认为hash(

• 仅供参考：

  • 不同的历史模式
  • 配置quasar.config.js