浏览器原理
利用的是html5的 history api 该BOM api提供了对history栈的操作,
history的一些使用方法
window.history.back() 向后window.history.forward() 向前window.history.go(-1) 多层次的跳转window.history.length 可以查看历史记录栈的长度HTML5新增的操作(提供了对历史记录栈操作的api)
1. 方法
pushState(状态对象,标题,URL) 跳转到新的页面replaceState(状态对象,标题,URL) 跳转到新的页面不保留历史记录状态对象: 就是存储到当前页面里面的数据
history.state 可以直接拿到数据标题:暂时用不到,也不生效
URL: 也就是跳转的url
2.事件
每当活动的历史记录项发生变化时,
popstate事件都会被传递给 window 对象。如果当前活动的历史记录项是被 pushState创建的,或者是由 replaceState改变的,那么 popstate事件的状态属性 state会包含一个当前历史记录状态对象的拷贝。vue-router基础原理
初始化
1.初始化状态
当使用
app.use(router)去注入vue-router路由插件的时候,vue-router内部回去创建当前的route信息对象放入到当前页面的history.state上注意这里面使用的是history.replace,仅仅为了存储当前的路由信息
2.暴露出的方法
push方法
注意一点:push之前要调用一次history.replace去存储一下当前页面的信息,比如要去的页面,和当前页面的滚动位置,方便后面退到当前页可以拿到之前的信息
replace方法
3.监听事件
这边主要是有两个作用:一个是维护当前的路由信息,第二个是为了路由钩子用的,收集一些钩子函数,触发