简化版的vue-router实现思路详解

本文旨在介绍 vue-router 的实现思路，并动手实现一个简化版的 vue-router 。我们先忽略 Router 构造函数，来看 install ，上面代码中的 this._Vue 是个开始没有定义的属性，他的目的是防止多次安装。接下来我们看一下 Router 要做哪些初始化工作。对于 hash 路由而言，url上 hash 值的改变不会引起页面刷新，但是可以触发一个 hashchange 事件。对于 history 路由，为了实现浏览器前进后退时准确渲染对应组件，还要监听一个 popstate 事件。如果是 a 标签，我们为其添加一个 href 属性。hash 模式下并且是 a 标签时候可以直接利用浏览器的默认行为完成url上 hash 的替换，否者重新为 location.hash 赋值。history 模式下则利用 pushState 去更新url。以上实现就是一个简单的vue-router，完整代码参见