Vue中hash路由和history路由的区别有哪些
小编给大家分享一下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,存在以下优势:
pushState()
设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL;pushState()
设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中;ushState()
通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串pushState()
可额外设置 title 属性供后续使用。
看完了这篇文章,相信你对“Vue中hash路由和history路由的区别有哪些”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
本文标题:Vue中hash路由和history路由的区别有哪些
网址分享:http://myzitong.com/article/ghpsgh.html