vue路由的两种模式，hash和history的区别

最新推荐文章于 2024-07-21 23:28:00 发布

檀小泡泡

最新推荐文章于 2024-07-21 23:28:00 发布

阅读量1.4k

点赞数 1

分类专栏： VUE 文章标签： vue路由

本文链接：https://blog.csdn.net/weixin_42371145/article/details/113619064

版权

本文介绍了Vue Router的两种模式：Hash和History，详细阐述了它们的区别和使用场景。Hash模式通过#符号实现路由变化，不向后端发送请求，而History模式利用HTML5的History API，提供更美观的URL，但需要后端配置以避免404错误。在大多数情况下，History模式更适合现代Web开发，但需注意刷新页面时的404问题。

摘要由CSDN通过智能技术生成

转自：https://www.cnblogs.com/lbcxq/p/12036788.html

1.直观区别：

hash模式url带#号，history模式不带#号。

对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

为了达到这一目的，浏览器当前提供了以下两种支持：

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。