Vue-Router路由模式的选择和底层原理

• Hash模式：丑，无法使用锚点定位。
• History模式：需要后端配合，IE9不兼容(可使用强制刷新处理IE9不兼容)

即可以根据两种模式的特点来进行路由选择。比如：当你的页面需要很多锚点进行定位时< a href="#new_paper" />，点击改链接跳转到页面的新闻部分，那么Hash模式是无法实现的，因为它自身带了#。

2.底层原理

如果我们去看Vue-Router的底层代码可能会优点晦涩难懂，下面总结一下底层原理，有哪些方式可以触发路由的更新呢？下面这张图一目了然：

理解：

• Vue.util.defineReactive_route这个工具库把路由的信息变成了响应式数据，而defineReactive()内部就是调用了Object.defineProperty()和依赖收集实现了路由信息的响应式，而Vue的data也是通过这种方式实现响应式。
• 图中左边五种方式都会触发调用updateRoute这个API，这个API的功能是修改路由中的响应式数据，当响应式数据被改变后就会自动触发router-view的更新，router-view会根据url和路由匹配规则进行相应组件的展示。

3.源码拓展

先来学习Vue-router的install()

3.1.1 $router和$route是如何挂载到this上的？

  Object.defineProperty(Vue.prototype, '$router', {
   
    get () {
    return this._routerRoot._router }   //this._routerRoot === this
  })

  Object.defineProperty(Vue.prototype, '$route', {
   
    get () {
    return this._routerRoot._route }   //this._routerRoot === this
  })

在vue-router的install方法中调用Object.defineProperty进行数据劫持，将$router、$route挂载到Vue的原型上。

注意：this._routerRoot其实就是Vue实例this，看下面源码，this._routerRoot指向了this

Vue.mixin({
   
    beforeCreate () {
   
      if (isDef(this.$options