前端路由(二)

前面我们做到了切换路由不发送请求，现在我们要把路由和组件对应起来达到渲染。

        接下来介绍的是VueRouter的原理，它是怎么做到的这个功能的。其会在 根Vue 上注册2个全局 函数式组件 <router-link> <router-view>，在根Vue原型上 定义$route(当前路由Route对象)和$router(传入newVue的router对象列表)两个属性(所有子Vue实例会继承)。 

        <router-link>，作为一个子组件，初始化渲染时会去执行render函数，主要做了 其内部属性(tab标签,activeClass等)的处理，在点击时会去执行router.push做url变化。它不涉及渲染，逻辑比较简单。

        执行router.push(replace)做url变化和初始化VueRouter时都会去触发transitionTo方法做路径切换。这个方法里做了很多事情，接下来会介绍。它执行完毕的成功回调中会切换url。

        最重要的问题是渲染组件，<router-view>如何知道去渲染哪个组件？我们手头有一个按文档规定写的new VueRouter({routers})列表,传给了根Vue，VueRouter通过它做了很多事情。

        首先在new VueRouter()时,会去执行其构造函数,其中createMatcher方法,会递归遍历routers把每个router对象进行重新描述得到RouteRecord对象，并由它们得到3个列表(pathList(路由path列表),pathMap(路由path: record列表),nameMap(路由name:record列表))，这3个列表是为导航守卫服务的我们先不管它。createMatcher最后返回2个方法，1、addRoutes，动态对上面3个列表修改。2、match，根据传入的位置和当前的路径，计算出新的路径为Route对象。

        transitionTo路径切换时，会去执行match函数计算新路径Route对象，其有一个属性值matched，是从当前RouteRecord向上(parent)查找直到根RouteRecord的到的RouteRecord数组，这样得到一个层级关系。我们在<router-view>的render函数中会标志flag表示是router-view组件，我们上(父组件)查找有flag标志就 会把 depth++，最后得到当前<router-view>的深度。我们通过$route.matched[depth]就可以找到router-view需要去渲染的组件。

        这里还有一个问题，我们怎么知道当前$route是哪个？在初始化routerVue，init()中规定了所有子组件的实例的$route属性指向根Vue的$route属性，根Vue的$route属性又等于this._router.history.current。而current这个值又是在路径切换时会变化的。也就是说我们路径变化会把当前$route指为当前组件路由的route路径对象，这个我们不用担心。

        概括：就是做路径切换时，我们会根据我们写的路由表，把当前路由往上到根路由的路由对象组成一个数组，描述一个层级关系List。<router-view>是函数式组件，它有标志flag，我们也会从它往上查找<router-view>直到根vue，有就depth++，得到当前<router-view>层级位置depth。List[depth].component就是我们要渲染的组件。

        我们知道<router-view>要去渲染哪个组件，它是怎么做到更新视图的？更新视图肯定也要符合Vue渲染原理呀，要把1个数据响应式化，get时收集订阅者Watcher并初始化渲染，set时派发更新 把订阅该数据的Watcher重新渲染。这个响应式数据是谁呢？就是定义在根Vue的_route，子Vue的$route也都指向它。<router-view>函数render执行的时候，会去取$route相当于访问根Vue的_route，会触发订阅者Watcher收集并初始化渲染。做路径切换时，会修改_route(即记录当前路由路径的this._router.history.current)。

触发点：router-link 提供了"下一个位置参数"，准备去切换url时，触发transitionTo方法去做路径切换。

响应式化数据：history.current。记录当前路径Route对象(由当前路由和下一个位置计算出来)，收集订阅者，派发更新渲染，都围绕它进行。

路由配对组件：当前路径Route对象(由当前路由和下一个位置 计算出来)和我们写的路由表，得到当前路径Route对象到根路径的 路由路线 数组，<router-view>肯定在这之内，不会比其更深层，所以在这数组之内可以用depth取到。

        守卫导航是怎么做到的？守卫导航就是transitionTo方法做路径切换时执行的一系列钩子函数。

        这些钩子函数有些定义在全局，用this.router.xxx可以取到。

        有些定义在组件内，通过前面的Routed.matched，即将离开路由的matched列表和当前路由的matched列表，从头对比到第一个不同，得到updated(目标RouteRecord和当前RouteRecord相同，前面重复的部分)、activated(目标RouteRecord和当前RouteRecord不同，后面不同的部分)、deactivated(当前RouteRecord和目标RouteRecord不同，后面不同的部分)三个RouteRecord数组。通过这些RouteRecord去取定义在组件中的导航守卫。

        有些定义在路由中，也通过这些RouteRecord去取。

到这里就完成了，接下来会分析前端路由在实际开发中的运用，比如页面权限设置！