Quasar SPA路由异常：访问/login页面被重定向至首页问题求助

我之前帮不少开发者排查过类似的Quasar路由重定向问题，你的情况核心原因是Quasar默认启用的hash路由模式和你期望的URL访问方式不匹配。

问题根源拆解 #

Quasar CLI生成的项目默认用的是Vue Router的hash模式（URL里带#的那种），这种模式下，路由的实际路径是在#后面的，比如正常访问登录页应该是http://localhost:9000/#/login。

当你直接输入http://localhost:9000/login时，开发服务器会把/login当成一个静态文件路径去找，找不到就返回SPA的入口index.html。这时候Vue Router启动，因为hash部分是空的，就会默认跳转到根路由/，也就是你的首页，同时地址栏会拼接成/login#/（当前页面路径+hash路由的根路径），所以你看到的是首页内容。

两种解决方案 #

方案1：切换到History模式（实现无#的干净URL，推荐）

要让/login直接生效，需要把路由模式改成history模式，步骤很简单：

1. 打开src/router/index.js，修改路由实例的创建代码：

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHistory(), // 替换原来的createWebHashHistory()
  routes
})

export default router

2. 重启你的Quasar dev服务（quasar dev），现在访问http://localhost:9000/login就能正常加载LoginPage了。

⚠️ 生产部署注意：如果以后要部署到线上服务器，需要给服务器加一个fallback配置，让所有路由请求都返回index.html（比如Nginx加try_files $uri $uri/ /index.html;，Apache配置FallbackResource /index.html），不然刷新子页面会出现404。

方案2：保持Hash模式，使用正确路径

如果暂时不想改模式，直接用hash模式的标准访问路径就行：

• 访问http://localhost:9000/#/login，就能正常看到登录页，不会有重定向问题。

额外检查项 #

• 确认你的routes.js配置没问题：你的路由顺序是对的，/login在根路由前面，不会被拦截；
• 排查全局路由守卫：如果src/router/index.js里加了router.beforeEach这类全局守卫，可能会导致意外重定向，可以暂时注释掉测试。

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