您的位置: 首页  >  文章  >  Vue中hash路由和history路由的区别有哪些

Vue中hash路由和history路由的区别有哪些

分类: 文章 • 2022-05-01 13:31:05

小编给大家分享一下Vue中hash路由和history路由的区别有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

hash路由和history路由这两种模式的区别，从以下几个方面梳理一下吧：

一、颜值

hash:  即地址栏 URL 中的#符号。 比如这个 URL：http://www.abc.com/#/hello， hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中， 但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history: 地址栏中没有 #。比如这个 URL：http://www.abc.com/hello，更美观，是个正常的url，适合推广宣传。

二、功能

history:  在开发app的时候有分享页面，这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就好了。

三、回车刷新

  • hash: 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面;

  • history： 利用了 HTML5 History Interface 中新增的 pushState() 和replaceState() 方法。

    这两个方法应用于浏览器的历史记录栈，在当前已有的 back()、forward()、go() 方法的基础之上，这两个方法提供了对历史记录进行修改的功能。当使用这两个方法执行修改时，只能改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行，一般会出现404，这时候就需要和后端人配合，设置重定向。

四、使用场景

一般情况下，hash 和 history 都可以，如果你是个颜值控，对 # 符号夹杂在 URL 里有些不爽。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。调用 history.pushState() 相比于直接修改 hash，存在以下优势：

  1. pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；

  2. pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；

  3. ushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串pushState() 可额外设置 title 属性供后续使用。

看完了这篇文章，相信你对“Vue中hash路由和history路由的区别有哪些”有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！

相关推荐