<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的生命周期，还记得第一步Vue-Router对Vue混入了beforeCreate钩子吗，在此会执行哦
Vue.mixin({
beforeCreate () {
//验证vue是否有router对象了，如果有，就不再初始化了
if (isDef(this.$options.router)) { //没有router对象
//将_routerRoot指向根组件
this._routerRoot = this
//将router对象挂载到根组件元素_router上
this._router = this.$options.router
//初始化，建立路由监控
this._router.init(this)
//劫持数据_route，一旦_route数据发生变化后，通知router-view执行render方法
Vue.util.defineReactive(this, '_route', this._router.history.current)
} else {
//如果有router对象，去寻找根组件，将_routerRoot执行根组件（解决嵌套关系时候_routerRoot指向不一致问题）
this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
}
registerInstance(this, this)
},
destroyed () {
registerInstance(this)
}
})
代码执行到这，初始化结束，界面将显示默认首页
路由更新方式：
一、主动触发
router-link绑定了click方法，触发history.push或者history.replace，从而触发history.transitionTo。
transitionTo用于处理路由转换，其中包含了updateRoute用于更新_route。
在beforeCreate中有劫持_route的方法，当_route变化后，触发router-view的变化。
二、地址变化（如：在浏览器地址栏直接输入地址）
HashHistory和HTML5History会分别监控hashchange和popstate来对路由变化作对用的处理 。
HashHistory和HTML5History捕获到变化后会对应执行push或replace方法，从而调用transitionTo
,剩下的就和上面主动触发一样啦。
总结
1、安装插件
混入beforeCreate生命周期处理，初始化_routerRoot，_router，_route等数据
全局设置vue静态访问router和router和route，方便后期访问
完成了router-link和 router-view 两个组件的注册，router-link用于触发路由的变化，router-view作 为功能组件，用于触发对应路由视图的变化
2、根据路由配置生成router实例
根据配置数组生成路由配置记录表
生成监控路由变化的hsitory对象
3、将router实例传入根vue实例
根据beforeCreate混入，为根vue对象设置了劫持字段_route，用户触发router-view的变化
调用init()函数，完成首次路由的渲染，首次渲染的调用路径是 调用history.transitionTo方法，根据router的match函数，生成一个新的route对象
