前端路由实现的关键知识点

一、采用location.hash+window.hashchange事件

1.不管是直接在链接标签上指定hash(<a href='#abc'>test</test>)还是通过location.hash='#1234'设置hash都会导致浏览器地址栏变化,从而触发hashchange事件

2.hashchange事件中可通过event.newURL来获取改变后的页面地址,然后从该url中提取#后面的内容(一般是一个页面地址及参数)

3.通过ajax加载上一步提取到的页面路径,然后插入指定位置即可

二、通过history.pushState和window.popstate事件

1.通过window.history.pushState(数据对象,标题,url)可生成一条历史记录,该方法会导致浏览器地址栏变更,但页面不会发生跳转

2.点击浏览器的前进、后退,或者location.hash发生变更时会触发window.popstate事件,在事件中可通过event.state获取第一步设置的数据对象

猜你喜欢

转载自www.cnblogs.com/94pm/p/9591274.html