// src/components/link.js render (h: Function) { ... const globalActiveClass = router.options.linkActiveClass const globalExactActiveClass = router.options.linkExactActiveClass // Support global empty active class const activeClassFallback = globalActiveClass == null ? 'router-link-active' : globalActiveClass const exactActiveClassFallback = globalExactActiveClass == null ? 'router-link-exact-active' : globalExactActiveClass ... }
router-link 默认渲染出来的元素是 <a> 标签，其会给这个 <a> 添加 href 属性值，以及一些用于监听能够触发路由切换的事件，默认是 click 事件：
// src/components/link.js data.on = on data.attrs = { href }
另外，你可以可以通过传入 tag 这个 props 来定制 router-link 渲染出来的元素标签：
<router-link to="/foo" tag="div">Go to foo</router-link>
如果 tag 值不为 a ，则会递归遍历 router-link 的子元素，直到找到一个 a 标签，则将事件和路由赋值到这个 <a> 上，如果没找到 a 标签，则将事件和路由放到 router-link 渲染出的本身元素上：
if (this.tag === 'a') { data.on = on data.attrs = { href } } else { // find the first <a> child and apply listener and href // findAnchor即为递归遍历子元素的方法 const a = findAnchor(this.$slots.default) ... } }
当触发这些路由切换事件时，会调用相应的方法来切换路由刷新视图：
// src/components/link.js const handler = e => { if (guardEvent(e)) { if (this.replace) { // replace路由 router.replace(location) } else { // push 路由 router.push(location) } } }
总结
可以看到， vue-router 的源码是很简单的，比较适合新手进行阅读分析
源码这种东西，我的理解是没必要非要 专门腾出时间来看 ，只要你熟读文档，能正确而熟练地运用 API 实现各种需求那就行了，轮子的出现本就是为实际开发所服务而不是用来折腾开发者的，注意，我不是说不要去看，有时间还是要看看的，就算弄不明白其中的道道，但看了一遍总会有收获的，比如我在看 vue 源码的时候，经常看到类似于这种的赋值写法：
// vue/src/core/vdom/create-functional-component.js (clone.data || (clone.data = {})).slot = data.slot
如果是之前，对于这段逻辑我通常会这么写：
if (clone.data) { clone.data.slot = data.slot } else { clone.data = { slot: data.slot } }
也不是说第一种写法有什么难度或者看不明白，只是习惯了第二种写法，平时写代码的过程中自然而然不假思索地就写出来了，习惯成自然了，但是当看到第一种写法的时候才会一拍脑袋想着原来这么写也可以，以前白敲了那么多次键盘，所以没事要多看看别人优秀的源码，避免沉迷于自己的世界闭门造车，这样才能查漏补缺，这同样也是我认为代码 review 比较重要的原因，自己很难发现的问题，别人可能一眼就看出来了，此之谓 当局者迷旁观者清也
以上所述是小编给大家介绍的vue router 源码概览，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: