vue路由hash和history（记录–前端路由 hash 与 history 差异）

时间2025-05-04 23:01:26分类IT科技浏览3951

导读：这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助...

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

Hash

简述

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL ，于是当 URL 改变时，页面不会重新加载。 hash（#）是 URL 的锚点，代表的是网页中的一个位置，单单改变 # 后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 # 是用来指导浏览器动作的，对服务器端完全无用，HTTP 请求中也不会不包括 # ，同时每一次改变 # 后的部分，都会在浏览器的访问历史中增加一个记录，使用 "后退" 按钮，就可以回到上一个位置，所以说 hash 模式通过锚点值的改变，根据不同的值，渲染指定 DOM 位置的不同数据。

# 符号本身以及它后面的字符称之为 hash ，可通过 window.location.hash 属性读取。

特点 hash 虽然出现在URL中，但不会被包括在 HTTP 请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变 hash 不会重新加载页面可以为 hash 的改变添加监听事件： window.addEventListener("hashchange", fncEvent, false) 每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录 url 带一个 # 号。设置 vue3 设置 hash 模式路由

history

简述 history 是路由的另一种模式，由于 hash 模式会在 url 中带# ，如果不想要带 #的话，我们可以使用路由的 history 模式，只需要在响应的 router 配置规则时,加上即可，vue 的路由默认是 hash 模式。利用了HTML5 History Interface中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back 、forward 、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。设置

特点路由跳转不需要重新加载页面。不带 # 在大部分人看来要比 hash 路由好看许多。兼容性没有 hash 好，会在下面展开说明生产环境问题及解决当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com ), 此时会经过 dns 解析，拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js) 。如果我们在前端设置了重定向，此时页面会进行跳转到 www.test.com/home ,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话，浏览器会发送新的请求 www.test.com/home, 如果后端服务器没有 /home 对应的接口，那么就会返回404 。

生产环境刷新 404 的解决办法可以在nginx做代理转发，在 nginx 中配置按顺序检查参数中的资源是否存在，如果都没有找到，让 nginx 内部重定向到项目首页。开发环境- historyApiFallback

有些小伙伴会有疑问,为什么开发环境没有遇到这个问题呢，不是和生产同样的刷新操作嘛。

这里我也是疑问了一下，经查阅相关资料后发现在vue-cli中webpack帮我们做了处理

如果我们把该配置改位 false,浏览器会把我们这个当做是一次 get 请求，如果后端没有对应的接口,就会出现下面这个报错提示。

总结

至此我们使用知道了 vue-roter 的两种路由模式，及差异化，简单来讲就是，hash 路由兼容梗好，但是带#显得丑些， histroy 和正常 url 路径一样，但是需要在服务器进行单独配置。大家可以根据自己的喜好去按需使用。有疑问的同学欢迎在评论区进行沟通。

本文转载于:

https://juejin.cn/post/7096034733649297421

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。