vue-router4

vue-router4

浏览器原理

利用的是html5的 history api 该BOM api提供了对history栈的操作,
notion image

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
notion image
注意这里面使用的是history.replace,仅仅为了存储当前的路由信息
2.暴露出的方法
push方法
notion image
注意一点:push之前要调用一次history.replace去存储一下当前页面的信息,比如要去的页面,和当前页面的滚动位置,方便后面退到当前页可以拿到之前的信息
 
replace方法
notion image
 
3.监听事件
notion image
这边主要是有两个作用:一个是维护当前的路由信息,第二个是为了路由钩子用的,收集一些钩子函数,触发