uniapp 路由模式history不起作用是怎么回事？

在uniapp项目中配置了路由模式为history，但在实际运行时发现没有生效，页面跳转仍然是hash模式。请问这是什么原因？需要检查哪些配置或代码？如何正确启用history路由模式？

2 回复

可能是配置问题。检查manifest.json中是否开启history模式，H5平台需单独配置。另外，服务器需支持SPA路由回退，否则刷新会404。


在uni-app中，路由模式设置为history模式后不起作用，通常由以下原因导致：

  1. H5平台未启用history模式
    uni-app默认使用hash模式，需在manifest.json中显式配置：

    {
  "h5": {
    "router": {
      "mode": "history"
    }
  }
}

    修改后重新编译运行（重要！）。

  2. 服务器未配置Fallback
    history模式依赖服务器支持，需将所有路由指向index.html。

    • Nginx示例：
      location / {
  try_files $uri $uri/ /index.html;
}
    • Apache示例（在项目根目录创建.htaccess）：
      RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

  3. 本地开发服务器问题
    使用hbuilderx内置浏览器可能不支持history模式，建议用Chrome或部署到服务器测试。

  4. 路由跳转方式错误
    确保使用uni.navigateTo等API跳转，而非<a>标签或直接修改URL。

  5. 基础路径（publicPath）问题
    若项目部署在子目录，需在manifest.json中配置：

    {
  "h5": {
    "publicPath": "/子目录路径/"
  }
}

检查步骤：

  1. 确认manifest.json配置正确且已重新编译
  2. 部署后通过服务器访问（非直接打开本地文件）
  3. 检查浏览器控制台是否有404错误

若问题依旧，请提供具体错误信息或部署环境细节以便进一步排查。

回到顶部