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

目录导航
我们在分析导航守卫时跳过了组件更新，这与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(){},
【vue-router源码解读--视图更新（RouterLink）】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函数，该函数将执行新一轮的路由过渡