前端路由hash、history、location总结

本文总结了前端路由的原理与实现方法,重点讨论了history对象和location对象,特别是hash模式与pushState的区别。history对象的go、back、forward方法及Html5的pushState和replaceState用于在不刷新页面的情况下改变URL。location对象的hash属性允许无刷新页面更新,当hash值改变时触发hashchange事件。pushState则能更优雅地改变URL,不涉及#号,但两者在浏览器地址栏的表现和对服务端的影响有所不同。
摘要由CSDN通过智能技术生成

1、理解路由

直接可理解为根据不同的url地址来显示不同的页面或内容的功能,最开始的后端路由有一个很大的缺点就是每次路由切换的时候都需要去刷新页面,然后发出ajax请求,然后将请求数据返回回来,那么这样每次路由切换都要刷新页面对于用户体验来说就会不太友好。因此为了提升用户体验,就有了前端路由,后面也就有了url的改变不会导致页面的刷新的成果。

2、前端路由方法

(1)history对象(window.history)

  • window.history.go():接收一个整数作为参数,按照当前页面在会话浏览历史记录中的位置进行移动。如果参数为0、undefined、null、false 将刷新页面,相当于执行window.location.reload()方法。如果参数大于浏览器浏览的数量,或小于浏览前的数量的话,什么都不会做。
  • window.history.back():移动到上一页。相当于点击浏览器的后退按钮,等价于window.history.go(-1)
  • window.history.forward():移动到下一页,相当于点击浏览器的前进按钮,相当于window.history.go(1)

Html5新增下面两个方法:

  • window.history.pushState(data, title, ?url): 在会话浏览历史记录中添加一条记录。
  • window.history.replaceState(data, tit
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值