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

一:需求

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

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

二、router-link

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

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

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

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

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

qu

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

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


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

了解即可

相关推荐
郑州光合科技余经理1 小时前
海外版外卖系统源码:支付/地图/多语言核心代码实现
android·java·前端·后端·架构·uni-app·php
古韵2 小时前
TanStack Query 被高估了?这 5 个场景它真不如 alova
前端
颂love2 小时前
Vue3基础入门
前端·学习·vue3
风吹夏回2 小时前
Vue 3 路由使用完全指南
前端·vue.js
创业之路&下一个五年2 小时前
JS编程范式 \& 面向对象范式
开发语言·前端·javascript
whatever who cares2 小时前
完整的Vue3项目文件结构
vue.js
李白你好2 小时前
DesJsFinder被动JS分析 + 框架识别 + 主动Fuzz + 响应指纹 — 红队API挖掘利器
javascript
ct9782 小时前
Axios 请求取消
前端·javascript·vue.js
IT_陈寒2 小时前
Redis客户端连接池不关闭的后果,程序直接崩给我看
前端·人工智能·后端