Vue Router——hash模式和 history模式

在 Vue.js 中,Vue Router 是官方提供的路由管理器,它允许你以单页面应用(SPA)的方式构建你的Vue应用。Vue

Router 支持两种路由模式:hash 模式和 history

模式。这两种模式的主要区别在于它们如何与浏览器的历史记录(History API)交互以及 URL 的形式。

Hash 模式

Hash 模式是 Vue Router 的默认模式。它使用 URL 的 hash(即 URL 中 # 后面的部分)来模拟一个完整的 URL,从而实现页面的跳转而无需重新加载页面。在 Hash 模式下,当 URL 改变时,页面不会重新加载。

Hash 模式的示例 URL:http://www.example.com/#/about

优点:

  • 兼容性好,可以在不支持 History API 的旧浏览器中使用。
  • 由于是基于锚点变化,不会向服务器发送请求获取新页面。

缺点:

  • URL 中会包含 #,对于某些需要 URL 干净的场景(如SEO)可能不是最佳选择。

History 模式

History 模式利用了 HTML5 的 History API 来实现页面的跳转而无需重新加载。这种模式允许你创建没有 hash 的正常 URL。

History 模式的示例 URL:http://www.example.com/about

优点:

  • URL 不含有 #,更加美观,对于需要 URL 干净的场景(如SEO)更加友好。

缺点:

  • 需要服务器端支持。因为在 History 模式下,如果用户直接访问或刷新非首页的 URL,服务器会收到一个路径请求,如果服务器没有被正确配置来匹配这个路径,就会返回 404 错误。因此,需要在服务器端添加一个回退处理,以便对所有的路径请求返回同一个 HTML 文件。
  • 不支持不支持 History API 的旧浏览器。

总结

选择哪种模式主要取决于你的需求以及目标浏览器的兼容性。如果你需要一个看起来更像传统网页的 URL 或者是在做SEO优化,History 模式可能是更好的选择,只要确保你的服务器配置能正确处理 SPA 的路由请求。如果你更关注兼容性或者不想额外配置服务器,那么 Hash 模式可能是更方便的选项。

相关推荐
剪刀石头布啊7 分钟前
泛洪DFS、BFS
前端
qetfw7 分钟前
Windows Server AD CS:根 CA、Web 证书模板与域内自动注册
前端·windows·windows-server
剪刀石头布啊7 分钟前
为什么React组件很少前缀,而vue的不少组件都有前缀
前端
剪刀石头布啊13 分钟前
gird网格布局
前端
瞬时出道14 分钟前
AI 回答为什么能一个字一个字蹦出来?前端搞懂 SSE 这一篇就够了
vue.js
啃火龙果的兔子14 分钟前
Google Chrome(谷歌浏览器)常用快捷键
前端·chrome
剪刀石头布啊17 分钟前
js真的是单线程实现异步并发么?
前端
剪刀石头布啊22 分钟前
js中改变this指向的操作有哪些
前端
剪刀石头布啊22 分钟前
vue、react 列表中使用 index 作为 key 的话,修改某一个元素后会发生什么
前端
方方洛23 分钟前
glowglow:语言无关的语法高亮器是怎么实现的
前端·前端框架