本文摘自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 2 3 4 5 6 7 8 9 |
|
javascript脚本执行 window.history.pushState 和 window.history.replaceState 不会触发 onpopstate 事件,在浏览器点击前进或者后退会触发
谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发 onpopstate 事件,而火狐浏览器则不会
四、下面贴一个类似vue-router的HTML5模式的例子,纯属加深理解,写的很粗糙。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
|
相关阅读 >>
深入了解h5中History特性--pushstate、replacestate
html5 table标签的样式介绍(另附html5 table css居中的实例)
更多相关阅读请进入《History》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者