三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

vue-router-link实现导航高亮效果

vue-router-link实现导航高亮效果

一:需求

为什么不用简单的css移除添加来实现?

因为js代码多,有更简单方式,声明式导航。

二、router-link

vue官方提供了一个全局组件router-link(取代a标签),本质还是a标签


to时必须要有的,而且里面的绝对路径不需要加#号
那到这里,我们就会想,他无非就是写的方式变复杂了,特点呢?

好,它最大的一个特点就是自带高亮效果!!

我们发现点击的路由界面自身还是a标签,并且多了两个类

qu

去style添加对应的类名 和样式即可


然后点击任意导航即可产生高亮

---------------------------------------

我们发现,router-link给标签加了两个类名

了解即可

← 返回列表