Vue Router 的 History 模式能去掉 URL 中的 #，让路由看起来像传统网站一样干净，比如 /user/123 而不是 /#/user/123。它靠浏览器的 history.pushState 实现无刷新跳转，但必须前后端配合才能稳定运行。
怎么启用 History 模式
在 Vue 3 项目中，路由配置需使用 createWebHistory() 替代 createWebHashHistory()：
- 打开
src/router/index.js（或.ts） - 导入
createWebHistory并传入history选项 - 确保没有遗漏
base配置（如部署在子目录，需显式设为base: '/sub/'）
示例代码：
import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
为什么刷新页面会 404？
因为 History 模式下，/user/123 是真实路径，浏览器会向服务器发起请求。而 SPA 只有一个 index.html 入口，其他路径服务器默认找不到资源，就返回 404。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
解决核心：让所有非静态资源（js/css/img 等）的请求，最终都返回 index.html，交由前端路由接管。
- Nginx：用
try_files $uri /index.html;拦截 - Apache：启用
mod_rewrite，加RewriteRule ^(.*)$ /index.html - Vercel/Netlify：自动支持，无需额外配置
- 开发阶段：Vue CLI 内置了
devServer.historyApiFallback: true，开箱即用
SEO 和用户体验提升点
History 模式本身不自动提升 SEO，但它为优化创造了前提：
- 搜索引擎可正常抓取
/product/2026这类语义化路径，而非忽略#/product/2026 - 用户分享链接、收藏、复制 URL 更自然，也便于做服务端预渲染（SSR）或静态站点生成（SSG）
- 配合
<meta name="description">和动态document.title更新，能显著增强页面可发现性
兼容性和兜底建议
History 模式要求 IE10+，若仍需支持 IE9 或更旧环境，不建议强行使用。
- 可检测
history.pushState是否可用，降级到 Hash 模式 - 测试关键操作：直接访问深层路由、浏览器前进/后退、F5 刷新，确认全部响应正确
- 避免在路由守卫中依赖
window.location.hash—— 它在 History 模式下为空
