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

一:需求

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

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

二、router-link

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

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

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

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

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

qu

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

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


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

了解即可

相关推荐
kyriewen4 小时前
今天的科技圈,全在抢英伟达的饭碗
前端·面试·ai编程
SouthernWind4 小时前
RAGFlow——结合本地知识库检索开发实战指南(包含聊天、检索本地的知识库文档和Agent模式)
前端
三翼鸟数字化技术团队4 小时前
websocket及SSE原理解析
前端
白鲸开源5 小时前
Apache SeaTunnel Zeta Engine 的 Basic Auth 是怎么工作的?
java·vue.js·github
妙码生花5 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(八):设计管理员模型、热重载配置
前端·后端·go
卤蛋fg65 小时前
vue 甘特图 vxe-gantt 的使用(四):周视图的渲染
vue.js
政采云技术5 小时前
Chrome 高阶调试技巧
前端
牧艺5 小时前
HTML-in-Canvas 深度解析:让 Canvas 真正「吃上」HTML 这碗饭
前端·html·canvas
卤蛋fg65 小时前
vue 甘特图 vxe-gantt 的使用(三):月视图的渲染
vue.js