可以看出来，上面的过程都是在代码内部进行路由的改变的，比如项目中常见的this.$router.push(), 等方法。然后将浏览器的地址栏置为新的hash值。那么如果直接在地址栏中输入URL从而改变路由呢，例如
我将dashboadr删除，然后置为article/hotSpot，然后回车，vue又是如何处理的呢？
setupListeners () { window.addEventListener('hashchange', () => { if (!ensureSlash()) { return } this.transitionTo(getHash(), route => { replaceHash(route.fullPath) }) }) }
该方法设置监听了浏览器事件hashchange，调用的函数为replaceHash，即在浏览器地址栏中直接输入路由相当于代码调用了replace()方法.后面的步骤自然与HashHistory.replace()相同，一样实现页面渲染。
HTML5History
HTML5History模式的vue-router 代码结构以及更新视图的逻辑与hash模式基本类似，和HashHistory的步骤基本一致，只是HashHistory的push和replace()变成了HTML5History.pushState()和HTML5History.replaceState()
在HTML5History中添加对修改浏览器地址栏URL的监听是直接在构造函数中执行的，对HTML5History的popstate 事件进行监听：
constructor (router: Router, base: ?string) { window.addEventListener('popstate', e => { const current = this.current this.transitionTo(getLocation(this.base), route => { if (expectScroll) { handleScroll(router, route, current, true) } }) }) }
以上就是vue-router hash模式与history模式不同模式下处理逻辑的分析了。
总结
以上所述是小编给大家介绍的vue-router实现原理及两种模式分析，希望对大家有所帮助！
您可能感兴趣的文章: