执行完Vue实例的beforeCreate钩子函数之后，接下解析<router-Link>和<router-view>这两个组件，并渲染到页面中。执行组件的render方法，
// 可以忽略，只需要知道是把to(目标组件)路径格式化， // route 为location匹配到在Router中的路由对象， // href和完整的链接。这里涉及到很多比较难看的函数，要抽象出来，不要绕 //进去 const { location, route, href } = router.resolve( this.to, current, this.append )
整个render都是在围绕构造虚拟Dom的data对象。其中对slot和tag进行了处理，总的来说，可以先忽略细节，认识到作用。<router-view>是个函数组件（也就是说它只是展示，没有数据监听，
没有this,没有钩子函数，它的render函数的第二个参数为render函数执行的上下文），router-view渲染之前注册了三个钩子函数：registerRouteInstance（组件初始beforeCreate执行）、
const route = parent.$route //route是怎么变化的，这个变化会导致页面重新渲染。 const matched = route.matched[depth]
$route变化在每个History实例中的调用transitionTo引起的，
/* 给app 为 Vue实例*/ history.listen(route => { this.apps.forEach((app) => { app._route = route }) }) // 把listen赋值给History的回调函数 listen (cb: Function) { this.cb = cb } // 这个cb在update钩子函数中执行 updateRoute (route: Route) { this.current = route this.cb && this.cb(route) } // _router的变化导致页面更新 Vue.util.defineReactive(this, ‘_route‘, this._router.history.current)
而updateRouter在confirmTransition(）中执行，confirmTransition又是transitionTo里执行。confirmTransition是vue-router难点，它涉及到导航的守护钩子函数。
原文：https://www.cnblogs.com/liuyinlei/p/13126225.html