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

一:需求

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

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

二、router-link

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

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

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

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

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

qu

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

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


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

了解即可

相关推荐
IT_陈寒7 小时前
Java里用Stream.parallel()翻车实录,这性能还不如单线程
前端·人工智能·后端
Bs_MoneyMagnet7 小时前
基于springboot+vue的生态果园采摘预约系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·毕业设计·计算机毕业设计
wangchunyu1147 小时前
JavaScript 零基础入门教程
前端
hanchenxing8 小时前
前端异步任务三方案:Celery vs Redis Stream vs BullMQ 实战对比消息队列
前端·数据库·redis·异步任务·方案对比
mONESY8 小时前
LangGraph.js 从零上手:把 Agent 工作流从一条线变成一张网
javascript
默_笙8 小时前
⚓ AI 的"官方答题卡":withStructuredOutput 与结构化输出的终局之战
前端·javascript
掘金挖土8 小时前
前端手摸手跑路之 AI 应用开发(五)
前端·后端
小羊没烦恼!9 小时前
Memory 记忆设计讨论:Agent Memory 的数据模型可以怎么设计
java·开发语言·前端·c++·c#
码上成长9 小时前
Mapbox 围栏编辑踩过的几个坑:key 串了、形状炸了、icon 挡住绿点
前端·前端框架
SGAMERrain9 小时前
做了一个免费的在线绘画网格工具 DrawGrid,聊聊一个小工具是怎么越做越完整的
前端