本文摘自PHP中文网,作者零下一度,侵删。
最近看到vue-router的HTML5 History 模式路由的实现,然后顺便又去研究了一下HTML5 的 History,以下是自己的一些理解,顺便用jquery写 一个实现类似vue-router里面HTML5 History 模式路由器,以达到练练手,熟悉熟悉的目的。一、history.pushState
1 |
|
上面第一和第二个参数可以为空,主要就是第三个参数,表示新历史纪录的地址,浏览器在调用pushState()方法后不会去加载这个URL,新的URL不一定要是绝对地址,如果它是相对的,它一定是相对于当前的URL
二、history.replaceState
1 |
|
window.history.replaceState
和 window.history.pushState
类似,不同之处在于 replaceState
不会在 window.history
里新增历史记录点,其效果类似于 window.location.replace(url)
,都是不会在历史记录点里新增一个记录点的。
三、window.onpopstate
来监听url的变化
1 |
|
javascript脚本执行 window.history.pushState
和 window.history.replaceState
不会触发 onpopstate
事件,在浏览器点击前进或者后退会触发
谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发 onpopstate
事件,而火狐浏览器则不会
相关阅读 >>
更多相关阅读请进入《History》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者