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

const createMap = (routes) => {
 let resMap = Object.create(null);
 routes.forEach(route => {
 resMap[route['path']] = route['component'];
 })
 return resMap;
}

RouterHistory 的实现也很简单，根据前面分析，我们只需要一个 current 属性就可以，如下：

const RouterHistory = function (mode) {
 this.current = null;
}

有了路由表和 history ， router-view 的实现就很容易了，如下：

Vue.component('router-view', {
 render(h) {
  let routerMap = this._self.$router.routerMap;
  return h(routerMap[this._self.$route.current])
 }
 })

这里的 this 是一个 renderProxy 实例，他有一个属性 _self 可以拿到当前的组件实例，进而访问到 routerMap ，可以看到路由实例 history 的 current 本质上就是我们配置的路由表中的 path 。

接下来我们看一下 Router 要做哪些初始化工作。对于 hash 路由而言，url上 hash 值的改变不会引起页面刷新，但是可以触发一个 hashchange 事件。由于路由 history.current 初始为 null ，因此匹配不到任何一个路由，所以会导致页面刷新加载不出任何路由组件。基于这两点，在 init 方法中，我们需要实现对页面加载完成的监听，以及 hash 变化的监听。对于 history 路由，为了实现浏览器前进后退时准确渲染对应组件，还要监听一个 popstate 事件。

Router.prototype.init = function () {
 if (this.mode === 'hash') {
 fixHash()
 window.addEventListener('hashchange', () => {
  this.history.current = getHash();
 })
 window.addEventListener('load', () => {
  this.history.current = getHash();
 })
 }
 if (this.mode === 'history') {
 removeHash(this);
 window.addEventListener('load', () => {
  this.history.current = location.pathname;
 })
 window.addEventListener('popstate', (e) => {
  if (e.state) {
  this.history.current = e.state.path;
  }
 })
 }
}

当启用 hash 模式的时候，我们要检测url上是否存在 hash 值，没有的话强制赋值一个默认 path ， hash 路由时会根据 hash 值作为 key 来查找路由表。 fixHash 和 getHash 实现如下：

const fixHash = () => {
 if (!location.hash) {
 location.hash = '/';
 }
}
const getHash = () => {
 return location.hash.slice(1) || '/';
}

这样在刷新页面和 hash 改变的时候， current 可以得到赋值和更新，页面能根据 hash 值准确渲染路由。 history 模式也是一样的道理，只是它通过

location.pathname

作为 key 搜索路由组件，另外 history 模式需要去除url上可能存在的 hash , removeHash 实现如下：