hash和history路由的区别

单页面应用

• SPA
• 一个项目中只有一个html页面，它在第一次加载页面时，将唯一完成的html页面和所有其余页面组件一起下载下来。
• 切换页面时，不会重新加载整个页面，而是通过路由来实现不同组件之间的切换。

Vue Router

• vue-router在实现单页面路由时，提供了两种方式：hash模式和history模式。

Hash

• vue-router默认为hash模式，利用了window可以监听onhashchange事件来实现。
• ”#“ 符号本身以及它后面的字符称之为 hash，可通过 window.location.hash 属性读取。
• “#”后面的hash值是用来指导浏览器动作的，对服务器没有影响。
• 每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“back”按钮，就可以回到上一个位置。
• hash 不利于 SEO（搜索引擎优化）。

History

• history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。

• 路径直接拼接在端口号后面，后面的路径会随着http请求发给服务器。

• 利用HTML5 History Interface中新增的 pushState() 和 replaceState() 方法来实现无刷新跳转的功能。

• 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

• 由于History API的缘故，低版本浏览器有兼容性问题。

• 生产环境下，如果在当前的页面刷新一下，此时会重新发起请求，如果后端配置的 nginx 没有匹配到当前url，就会出现404的页面。
  eg：当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com ), 此时会经过 dns 解析，拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向，此时页面会进行跳转到 www.test.com/home ,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话，浏览器会发送新的请求 www.test.com/home, 如果后端服务器没有 /home 对应的接口，那么就会返回404。

• 解决办法：可以在 nginx 做代理转发，配置按顺序检查参数中的资源是否存在，如果没有找到，让 nginx 内部重定向到项目首页。

对比

hash	history
有 # 号	没有 # 号
能够兼容到IE8	只能兼容到IE10
实际的url之前使用哈希字符，这部分url不会发送到服务器，不需要在服务器层面上进行任何处理	每访问一个页面都需要服务器进行路由匹配生成 html 文件再发送响应给浏览器，消耗服务器大量资源
刷新不会存在 404 问题	浏览器直接访问嵌套路由时，会报 404 问题。
不需要服务器任何配置	需要在服务器配置一个回调路由

小结

• hash 路由兼容性好，但是带”#“显得丑些， histroy 和正常 url 路径一样，但是需要在服务器进行单独配置。

参考：
https://juejin.cn/post/7096034733649297421
https://juejin.cn/post/7037282729485959204