window.addEventListener('popstate', e => {
const current = this.current
// Avoiding first `popstate` event dispatched in some browsers but first
// history route not updated since async guard at the same time.
const location = getLocation(this.base)
if (this.current === START && location === initLocation) {
return
}
this.transitionTo(location, route => {
if (supportsScroll) {
handleScroll(router, route, current, true)
}
})
})
对于 Vue SPA 页面,改变可以有两种:一种是用户点击链接元素,一种是更新浏览器本身的前进后退导航来更新。
用户点击链接元素
户点击链接交互,即点击了
<router-link>
,这个组件是在install
的时候被注册的。我们来看一下这个组建的核心内容:该组件主要是通过
render
函数,默认创建一个a
标签,同时为标签绑定click
事件。在绑定事件的函数中,有这样一个方法值得注意guardEvent
。我们来看看他所做的工作:可以看到,这里主要对是否跳转进行了一些判断。那么我们再看看点击事件的处理函数:
可以看到其实他们只是代理而已,真正做事情的还是
history
来做。浏览器本身的跳转动作
对于这种情况,我们之前文章也简单的分析过,先来看看
hash
的方式,当发生变得时候会判断当前浏览器环境是否支持supportsPushState
来选择监听popstate
还是hashchange
:对应的
history
其实也是差不多。只不顾既然是history
模式了,默认也就只用监听popstate
就好了:到这里其实
vue-router
实现已经介绍的差不多了。相信能看到这里的小伙伴也能对vue-router
有个清晰地认识。