深入Vue-Router源码分析路由实现原理
使用Vue开发SPA应用，离不开vue-router，那么vue和vue-router是如何协作运行的呢，下面从使用的角度，大白话帮大家一步步梳理下vue-router的整个实现流程。
到发文时使用的版本是：
– vue (v2.5.0)
– vue-router (v3.0.1)
一、vue-router 源码结构
github 地址：https://github.com/vuejs/vue-router
components下是两个组件<router-view> 和 <router-link>
history是路由方式的封装，提供三种方式
util下主要是各种功能类和功能函数
create-matcher和create-router-map是生成匹配表
index是VueRouter类，也整个插件的入口
Install 提供安装的方法
先整体展示下vue-router使用方式，请牢记一下几步哦。
import Vue from 'vue'
import VueRouter from 'vue-router'
//注册插件 如果是在浏览器环境运行的，可以不写该方法
Vue.use(VueRouter)// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const User = { template: '<div>用户</div>' }
const Role = { template: '<div>角色</div>' }
// 2. 定义路由
// Array,每个路由应该映射一个组件。
const routes = [
{ path: '/user', component: User },
{ path: '/home', component: Home }
]
// 3. 创建 router 实例，并传 `routes` 配置
const router = new VueRouter({
routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 对象以参数注入Vue，
// 从而让整个应用都有路由功能
// 使用 router-link 组件来导航.
// 路由出口
// 路由匹配到的组件将渲染在这里
const app = new Vue({
router,
template: `
<div id="app">
<h1>Basic</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/user">用户</router-link></li>
<li><router-link to="/role">角色</router-link></li>
<router-link tag="li" to="/user">/用户</router-link>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')
分析开始
第一步
Vue是使用.use( plugins )方法将插件注入到Vue中。
use方法会检测注入插件VueRouter内的install方法，如果有，则执行install方法。
注意：如果是在浏览器环境，在index.js内会自动调用.use方法。如果是基于node环境，需要手动调用。
if (inBrowser && window.Vue) {
window.Vue.use(VueRouter)
