vue中路由的hash和history模式的区别

周小航.

已于 2022-08-03 09:09:20 修改

阅读量369

点赞数 1

文章标签： vue.js 哈希算法前端

于 2022-08-03 09:04:01 首次发布

本文链接： https://blog.csdn.net/weixin_64103049/article/details/126133531

版权

本文介绍了前端路由的两种主要模式：Hash模式和History模式。Hash模式的URL带有#，特点是改变hash值不会重新加载页面，适用于低版本浏览器，常用于SPA应用。而History模式的URL更美观，但需要后台配置支持，刷新页面时若无对应路由可能返回404。History模式通过onpopstate事件监听页面历史记录变化，提供更好的用户体验。

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

hash模式：是开发中默认的模式，它的URL带着一个#，例如：http://www.abc.com/#/vue，它的hash值就是#/vue。

特点：hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。

原理：hash模式的主要原理就是onhashchange()事件，使用onhashchange()事件的好处就是，在页面的hash值发生变化时，无需向后端发起请求，window就可以监听事件的改变，并按规则加载相应的代码。除此之外，hash值变化对应的URL都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器，但是页面的hash值和对应的URL关联起来了。

history模式：history模式的URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。

特点：当使用history模式时，URL就像这样：http://abc.com/user/id。相比hash模式更加好看。但是，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。虽然history模式丢弃了丑陋的#。但是，它也有自己的缺点，就是在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。

切换为history模式：