Vue Router 的路由模式 hash 和 history 的实现原理Vue Router核心是通过Vue.use注

早期前端路由是基于location.hash来实现的，location.hash的值就是URL中#后面的内容，eg：www.word.com#search，它后面的location.hash的值为#search。

hash路由模式的实现主要基于下面几个特性：

HTML5提供History API来实现URL变化，history.pushState和history.replaceState，前者新增一条历史记录，后者直接替换当前历史记录。

history路由模式的实现主要基于下面几个特性：

history模式需要后台配置支持。若后台没有正确的配置，用户直接访问就会返回404。故需在服务端增加一个覆盖左右情况的候选资源，返回index.html，就是app依赖的页面。

Vue Router核心是通过Vue.use注册插件，在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的世界，根据router对象匹配相应路由，获取组件，并渲染组件到视图上。

如何在install方法中获取Vue实例上的router属性

利用Vue.mixin混入声明周期函数beforeCreate，在beforeCreate函数中可以获取Vue实例上的属性并复制到Vue原型链上。
```
_Vue.mixin({      
    beforeCreate(){    
    if(this.$options.router){      
_Vue.prototype.$router = this.$options.router    }  }})
```
如何触发更新

hash模式：
- 通过location.hash修改hash，触发更新；
- 通过监听hashchange事件监听浏览器前进或后退，触发更新。
history模式：
- 通过history.pushState修改浏览器地址，触发更新；
- 通过监听popstate事件监听浏览器前进或后退，触发更新。
如何渲染router-view组件

通过Vue.observable在router实例上创建一个保存当前路由的监控对象current；当浏览器地址发生变化时，修改监控对象current；在router-view组件中监听监控对象current的变化，当current变化后，获取用户注册相应的component，并利用h函数将component渲染成vnodes，进而更新页面视图。

Vue Router 的路由模式 hash 和 history 的实现原理