1. 引入vue-router

这里引入了vue-router并使用Vue.use注册，导出了一个Router的实例

image.png

在main.js中的Vue实例中传入路由对象

image.png

创建的路由都是VueRouter类的实例化，用来管理我们的【key-components-view】，一个key（代码中的path）对应一个组件，view也就是<router-view>在template里面占个坑，用来根据key展示对应的组件。

route和router
route是一个路由对象，表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配的路由记录

router是router实例包括了路由的跳转方法，钩子函数等

2. vue-router是一个vue插件

vue-router是作为插件加入使用的，通过mixin（混合）来影响每一个Vue实例化，在beforeCreate 钩子的时候就会完成router的初始化，从参数获取router -> 调用init初始化 -> 加入响应式（defineReactive方法在vue源码用的很多，也是底层实现响应式的核心方法）

// 源码install.js
Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router   // 获取options里面的router配置
        this._router.init(this)               // 初始化，这个init是VueRouter类里面的方法，实例化后会继承这个方法
        Vue.util.defineReactive(this, '_route', this._router.history.current) // 这个是把_route加入数据监控，所以你可以watch到_route
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })

3. <router-link> & <router-view>是vue组件

export function install (Vue) {
  ...
  Vue.component('RouterView', View)  // <router-link> & <router-view>本质就是vue组件
  Vue.component('RouterLink', Link)
  ...
}

4. 关于mode

1. hash
   利用了hash的一些特性

• 改变hash并不会引起页面重载
• HTTP请求不包括#，所以使用hash不会影响到其他功能
• 改变#会改变浏览器的访问历史
• window.location.hash可以读取哈希值
• JavaScript可以通过onhashchange监听到hash值的变化，这就意味着可以知道用户在浏览器手动改变了hash值

2. history
   使用了HTML5中新增的history.pushState()和history.replaceState(),利用window.popState()方法监听history的变化
   （关于history的内容https://www.jianshu.com/p/3fc82faf48ac）

更多详细内容请查看（https://segmentfault.com/a/1190000018227116?utm_source=tag-newest#articleHeader2）