vue-router源码解读--视图更新（RouterLink）

目录导航

我们在分析导航守卫时跳过了组件更新，这与RouterView和RouterLink相关

本节我们尝试分析router-link的具体实现，示例代码如下

click me

对于router-link可接收的参数如下

比较常用的是to，这标识路由即将跳转的导航位置；tag决定了router-link将被转化为那种html标签；activeClass则提供了用户自定义激活态样式的能力

我们知道，vue可以自定义render，也可以通过对模板template进行编译转化为render函数。对于router-link而言，则使用的是自定义方式

它首先拿到我们的路由实例和路由对象，前者提供了整个的路由信息，后者则保存了单个路由的信息；而$router和$route则是在路由注册过程中通过Object.defineProperty指向_router和_route

这实际上指向

即router为

ccurrent为

接着调用resolve

location是对当前url地址的解析，如http://www.baidu.com/detail?a=1#b将被解析为hash:b,params:{a:1},path:detail

route是路由对象，它的matched则保存着匹配的路由映射表

href则是当前的url路径，为detail

接着对我们的激活样式进行处理，可以看出，它会优先使用用户自定义的类型，其次查找全局定义最后使用默认值

接着对重定向进行处理

接着处理事件

可以看到，当router-link被渲染到页面触发相应事件时，实际上调用的是实例上实现的replace或push方法进行的导航

接着对tag标签进行处理

对于a标签而言，它会将on和attrs挂载到data上，此时的data大致如下：

{

    on:{

        click:function(){},

        class:'act-link',

        attrs:{href:'/detail'}

    }

}

这显然将作为createElement的第二个参数

但是我们当前示例非a，故进入else逻辑

我们知道，默认情况下，我们在组件标签内写的内容的将会被挂载到$slot的default上，vueRouter将会尝试从$slot上查找a标签，在我们当前的示例中将走进else中，这将只添加on属性

而对于a标签而要，它会查找到a标签对应的vnode，并向其data上绑定href、on、class属性，此时页面上渲染的标签结构为

（vueRouter执着于查找a标签，是因为即使不使用router-link组件，a标签也能完成导航功能）

最后通过createElement创建一个span元素

如此，当点击span标签时将执行push函数执行新一轮的路由过渡

---

也就是说，router-link是一个使用了render函数的自定义组件，它会将我们的属性作为createElement函数的参数二传入，这在vue组件渲染过程中将会被正确解析为指定的html属性。只是本次它的事件不再是在methods定义，而是固定的指向push或replace函数，该函数将执行新一轮的路由过渡