Vue路由模式大揭秘：选对模式，页面跳转不再"迷路"！

江城开朗的豌豆
396 阅读4分钟

大家好，我是小杨，一个干了6年前端的老兵。今天咱们聊聊Vue路由的模式问题，很多新手在配置路由时，往往对hash和history模式傻傻分不清楚，结果部署上线后各种404、页面刷新白屏，甚至SEO不友好。今天我就带大家彻底搞懂Vue路由的几种模式，让你在项目里游刃有余！

一、Vue路由的两种核心模式

Vue Router默认支持两种路由模式：

  1. Hash模式（mode: 'hash'）
  2. History模式（mode: 'history'）

此外，还有Memory模式（主要用于非浏览器环境，比如SSR或移动端），但今天我们主要讨论前两种。

二、Hash模式：带#号的URL

1. 特点

  • URL里带#，比如 http://example.com/#/home
  • 不依赖服务器配置，刷新不会404
  • 兼容性好，IE9+都能跑

2. 原理

Hash模式利用的是浏览器的锚点（hash） 特性，#后面的变化不会触发页面刷新，但会触发hashchange事件，Vue Router监听这个事件来实现路由切换。

3. 适用场景

  • 静态网站托管（GitHub Pages、Netlify等）
  • 不想折腾服务器配置的情况
  • 需要兼容老浏览器的项目

4. 代码示例

const router = new VueRouter({
  mode: 'hash', // 默认就是hash，可以不写
  routes: [...]
})

三、History模式：优雅的URL

1. 特点

  • URL干净，比如 http://example.com/home
  • 依赖服务器配置，否则刷新会404
  • 需要后端支持（Nginx/Apache/Node.js等）

2. 原理

History模式利用HTML5的history.pushState和history.replaceStateAPI，让URL变化但不刷新页面，同时能记录浏览历史。

3. 适用场景

  • 需要SEO友好的项目
  • 企业级应用，追求专业URL风格
  • 能控制服务器配置的情况

4. 代码示例

const router = new VueRouter({
  mode: 'history', // 使用history模式
  routes: [...]
})

5. 服务器配置（避免刷新404）

Nginx配置

location / {
  try_files $uri $uri/ /index.html; # 所有路径都回退到index.html
}

Node.js（Express）

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
})

四、Memory模式：无URL变化的路由

1. 特点

  • URL不会变，完全由前端JS控制
  • 适用于非浏览器环境（如React Native、Electron、SSR）
  • 不会影响SEO，因为压根没有URL变化

2. 代码示例

const router = new VueRouter({
  mode: 'abstract', // Vue 2叫abstract，Vue 3叫memory
  routes: [...]
})

五、如何选择路由模式？

模式适用场景是否需要服务器配置SEO友好兼容性
Hash静态托管、兼容老浏览器❌ 不需要❌ 不友好IE9+
History企业级应用、SEO优化✅ 需要✅ 友好IE10+
Memory非浏览器环境（SSR、Electron）❌ 不需要❌ 不适用所有环境

我的经验总结

  1. 个人博客/静态网站 → Hash模式（省事）
  2. 企业后台/电商网站 → History模式（专业）
  3. React Native/Electron → Memory模式（无URL需求）

六、常见坑点 & 解决方案

1. History模式刷新404？

  • 原因：服务器没正确配置回退到index.html
  • 解决：参考上面的Nginx/Node.js配置

2. Hash模式SEO差？

  • 解决：用服务端渲染（SSR）或预渲染（Prerender）

3. 微信内置浏览器兼容性问题？

  • 解决：强制使用Hash模式，避免微信的奇葩history兼容问题

七、总结

  • Hash模式：简单省事，适合静态网站
  • History模式：专业优雅，但需要服务器支持
  • Memory模式：非浏览器环境专属

选对模式，能让你的项目少踩很多坑！如果你在项目里遇到过路由的奇葩问题，欢迎在评论区分享，我帮你分析~

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

​

avatar
文章
阅读
粉丝