vue-router 源码分析——2. router-link 组件是如何实现导航的

这是对vue-router 3 版本的源码分析。
本次分析会按以下方法进行：

1. 按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
2. 在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
3. 每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

本章讲解router中 router-link 组件是如何实现导航的。
另外我的vuex3源码分析也发布完了，欢迎大家学习：
vuex3 最全面最透彻的源码分析
还有vue-router的源码分析：
vue-router 源码分析——1. 路由匹配
vue-router 源码分析——2. router-link 组件是如何实现导航的
vue-router 源码分析——3. 动态路由匹配
vue-router 源码分析——4.嵌套路由

官网例子

• 在官网例子中，对做了三个注释：这是个组件、传入to属性，渲染成标签。
• 以我们主要分析 router-link 组件如果利用必要的数据来实现导航的。
• 这里先解释一下，渲染html页面的功能，是vue-router调用了vue的render函数，这个是vue的核心功能不做分析。所以这里是分析router是如何定位到对应路由以及做了哪些信息收集和处理的。

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
</div>

Vue实例挂载link组件，从而可以使用标签

• 这里的install.js实际上是一个VUE的插件，这样当创建和挂载根实例时自动导入了插件。
• 这里面还涉及到VUE的混入（Vue.mixin)，实现了在任意组件内通过this.$ router和this.$route来访问路由器和当前路由。感兴趣的小伙伴可以去看VUE官网的解释。

// ./install.js
import Link from './components/link'

export function install(Vue) {
   
   
    Vue.component('RouterLink', Link)
}

link.js源码内容

• 传入了一个to变量，对应’/foo’，tag默认为’a’，即标签.
• render函数是vue用来描述如果构建虚拟DOM的，即如何按某个定义来构建组件。
• 如何渲染为html是vue中的核心内容，这里不做讨论，只分析vue-router中的源码内容，即resolve方法。

        const {
   
    location, route, href } = router.resolve(
            this.to,
            current