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。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

解决核心：让所有非静态资源（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 模式下为空

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！