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 模式可能是更方便的选项。

相关推荐

  1. hash模式history模式的区别

    2024-06-08 12:20:04       18 阅读
  2. Vue Router——hash模式 history模式

    2024-06-08 12:20:04       11 阅读
  3. vue3 hashhistory模式路由配置

    2024-06-08 12:20:04       15 阅读
  4. 路由的hashhistory模式的区别

    2024-06-08 12:20:04       13 阅读
  5. Vue Router 路由hashhistory模式

    2024-06-08 12:20:04       11 阅读
  6. hashhistory路由模式的区别

    2024-06-08 12:20:04       7 阅读
  7. Vue的路由实现:hash模式 history模式原理

    2024-06-08 12:20:04       31 阅读
  8. h5 history模式是什么

    2024-06-08 12:20:04       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-08 12:20:04       17 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-08 12:20:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-08 12:20:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-08 12:20:04       18 阅读

热门阅读

  1. Elasticsearch 认证模拟题 - 10

    2024-06-08 12:20:04       10 阅读
  2. TCP和udp能使用同一个端口通讯吗

    2024-06-08 12:20:04       8 阅读
  3. 设计模式总结

    2024-06-08 12:20:04       6 阅读
  4. UVa1116/LA2429 Puzzle

    2024-06-08 12:20:04       5 阅读
  5. #07 使用Stable Diffusion生成高质量图片的技巧

    2024-06-08 12:20:04       8 阅读
  6. HTTP参数污染漏洞

    2024-06-08 12:20:04       8 阅读
  7. 速盾:图片cdn托管

    2024-06-08 12:20:04       9 阅读
  8. 挣值计算中的典型与非典型

    2024-06-08 12:20:04       8 阅读
  9. Objective-C中分类无法添加实例变量的底层原理

    2024-06-08 12:20:04       10 阅读