需求:切换页面,异步加载JS,异步传参。
方式1:修改URL中的Hash
URL可带Hash标识不同页面,通过Window
对象的onhashchange
事件修改URL中的hash
值。
http://www.hostname.com/index#page-home
http://www.hostname.com/index#page-profile
http://www.hostname.com/index#page-setting
http://www.hostname.com/index#page-news
window
对象的onhashchange
事件触发场景
- 直接更改浏览器地址,在其后新增或修改
#hash
- 通过改变
location.href
或location.hash
的值 - 出发点击带
hash
锚点的链接 - 浏览器前进后退导致
hash
变化,前提是网址中hash
值不同。
方式2:修改H5的History
H5的history
作为一种主流方法,因为hishtory
是浏览器历史栈的一个接口,history
对象中有back()
、forward()
、go()
实现堆栈跳转。
H5提出pushState()
和replaceState()
方法,可向历史栈中添加数据,好像URL变化一样。在过去,只有URL变化history
栈才会变化。使用H5的history
可以很好的模拟浏览器前进后退。前端路由也是基于这个原理实现的。
pushState(obj, title, url)
- 向
history
栈写入数据 -
obj
写入的数据对象,不大于640KB -
title
页面标题 -
url
相对路径
使用注意
- 当
pushState
执行一个浏览器的URL
会发生改变页面不会刷新,只有当触发了前进后退等事件浏览器才会刷新。 - URL受到同源策略限制,防止恶意脚本模仿站点URL来欺骗用户。所以当违背同源策略时会报错。
- Firefox目前会忽略
title
参数化
replaceState(obj, title, url)
区别在于replaceState
不是写入而是替换栈顶记录,其余和pushState
一样。
History.length
静态只读属性,历史堆栈长度。