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