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

一:需求

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

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

二、router-link

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

to时必须要有的,而且里面的绝对路径不需要加#号

那到这里,我们就会想,他无非就是写的方式变复杂了,特点呢?

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

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

qu

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

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


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

了解即可

相关推荐
无糖可可果几秒前
从前端路由的起源到 React Router 实战
前端
亿元程序员2 分钟前
竹知了很火?于是我用Cocos做了一个
前端
八号当铺3 分钟前
我做了一个多端基金收益助手:从养基宝数据到 Web、桌面端、浏览器插件和 IDE 插件
前端·人工智能·github
用户852495071843 分钟前
从多页到 SPA:用 50 行代码理解前端路由的本质
前端
Zldaisy3d7 分钟前
连续纤维增材制造的机翼已飞上天,复材打印在低空飞行器上还需翻过几道坎?
java·前端·数据库
__sjfzllv___7 分钟前
在职前端Leader学习/转行 AI Agent -DAY24
前端
喜欢睡觉9 分钟前
从"白一下"到"丝滑切换"——前端路由的进化史
前端
玉宇夕落12 分钟前
React 多种路由学习:HashRouter 源码级剖析
前端
张元清13 分钟前
桶文件(Barrel Files):index.ts 统一导出如何拖垮 Tree Shaking、Next.js 开发内存和 tsc
javascript·react.js
他们叫我秃子14 分钟前
前端开发转 Go 全栈(三):从函数到 error,Go 连“失败”都要明确返回
前端·后端·go