寒假比赛总结(四) - 重新认识'router-link'

前言

接触Vue.js的时间有半年了,正式将Vue.js用于项目开发也有将近三个月了。Vue中有个<router-link>的东西比较有意思,这个组件里有很多很有意思的小细节当时没注意到,不过比赛项目正好又要用上这个东西。

一个看似不起眼的需求

我们的比赛项目采用的布局是目前流行的APP布局,即:顶部一个Panel,中间是内容,底部是一个两个或两个Logo以上的Tabbar,用于不同功能之间的切换。而问题出在这个被激活的Tabbar元素上:这个匹配到当前路由的Tab需要被点亮,就像下图:

http://lenconda.top/images/18020801.png

因为我这边Tabbar采用的是Flexbox布局,然后每个元素用一层<router-link>包起来,然后分别跳转到各自匹配的路由上去。但是如何将匹配到的Tab点亮呢??绞尽脑汁想了很久,还是没有一个比较完美的解决方案,期间想过Vuex,想过在data中绑定,但是每个想法都十分麻烦。

发现ActiveClass

突然想起一个月前在观看慕课网上一个Vue.js高仿饿了么的视频,里面貌似用过这个东西,好像是顶部的Tabbar,也是匹配了不同的路由,当点击其中一个时,文字变红,底部多了一个红色的下划线,切换另一个时,另一个变成上述状态,先前那个恢复原状。于是赶紧翻开视频,发现讲师演示代码的时候没有过任何与之相关的代码编写,当其在Chrome中展示的时候,发现被激活的Tab的<a>标签中被加了两个class:router-link-exact-active router-link-active。但是先前并没有看见其编写过添加/删除class的代码。于是想到可能是Vue已经存在这个功能!

于是赶紧翻看Vue的官方文档,在router的文档中翻出这么一句话:

Configure the active CSS class applied when the link is active with exact match. Note the default value can also be configured globally via the linkExactActiveClass router constructor option.

来自:https://router.vuejs.org/en/api/router-link.html

这么看来这个class真的是Vue给我们全部搞定了。真是太神奇!

进一步实践发现,这个router-link-active会出现在匹配到当前路由的所有的<router-link>上,router-link-exact-active只会在精确匹配到这个路由的<router-link>上,例如当前匹配到/path/to/1/1.1,A是匹配到/path/to/1/1.1,B匹配到/path/to/1,C匹配到/path/to/1/1.1/1.1.1,这三者都会被加上router-link-active这个class,而只有A会被加上router-link-exact-active

最终实践

有了以上的基础,我可以将其应用在比赛项目上。最终效果也很让人满意:

http://lenconda.top/images/18020802.png

最后不得不佩服尤大的深谋远虑和强大的技术能力,为用户提供了极大的便利。

将最新的文章发送到你的邮箱

展示评论