vue-router:hash与history

3 篇文章 0 订阅

结论

实现原理:
hash利用hash改变时的onhashchange事件
history利用window.history在H5中新增的特性:onpopstate事件以及pushState()、replaceState()方法
由实现原理引发的特性
url: hsah方式实现的前端路由中有#字符,history实现的就是一个正常的url
页面刷新时的额外配置: 页面刷新时,由于http请求不包含hash所以,浏览器发出的请求都是对#之前的url的请求,在一个单页应用中一般所有页面都是相同的;但如果是history模式每个页面的url不同,页面刷新时会向服务器请求不同页面,这时需要服务器配置一个应对所有url情况的响应,可以重定向到首页
例如:http://domain.com/#/page1/subpage与http://domain.com/page1/subpage在页面刷新时,浏览器分别请求的是http://domain.com与http://domain.com/page1/subpage

认识hash

hsah是页面中的位置标志符,用#表示
特性:

  • hash值不会在http请求中携带
  • url中的hash值改变时,不会引起重载,浏览器只会滚动到相应位置,不会重新加载页面,浏览器不会向服务器发起请求
  • url中的hash改变时,会修改浏览器历史记录
  • 当hash变化时,会出发onhashchange事件
  • 可以通过window.location.hash读取hash值

history

浏览器history对象

  • go()、forward()、back()方法都会出发onpopstate事件
  • pushState()与replaceState()方法会修改历史记录但不会引起页面刷新
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值