router-link-active和router-link-exact-active

  1. router-link-active

    • 用途在Vue Router中,router-link-active是一个动态类名,用于表示当前激活的路由链接。当路由匹配到某个<router-link>组件的to属性所指定的路径时,Vue会自动给这个<router-link>组件添加router-link-active类名。
    • 应用:这个类名通常与CSS样式结合使用,以便为当前激活的路由链接添加特定的样式,如高亮显示,从而提升用户体验。
  2. router-link-exact-active

    • 用途router-link-active类似,但router-link-exact-active的添加条件更为严格。它仅在当前路由完全匹配<router-link>组件的to属性所指定的路径时,才会被添加到该组件上。
    • 应用:这有助于在需要精确匹配路由时,避免因为子路由的激活而错误地高亮显示父路由链接。通过为router-link-exact-active类名添加特定的CSS样式,可以确保只有在完全匹配的情况下,链接才会被高亮显示。

router.push不会自动添加 router-link-active 类名的问题。

<li @click="router.push('/paymentCenter')">支付中心
</li>

在 Vue.js 应用中使用 Vue Router 时,<router-link> 组件是专门为 Vue Router 设计的,它会自动处理点击事件以导航到指定的路由,并且会根据路由的当前状态来添加或移除 router-link-active 类名。然而,当你直接在 <li> 元素上使用 @click 监听器并调用 router.push() 方法进行路由跳转时,Vue Router 无法自动知道这个 <li> 元素与哪个路由链接相关联,因此不会自动添加 router-link-active 类名。

解决方式:

  • 使用 <router-link> 替代 <li>

最直接的方法是使用 <router-link> 替代 <li>,并通过 CSS 来模拟 <li> 的样式。例如:

<router-link to="/paymentCenter" tag="li" class="nav-item" active-class="active">  支付中心  
</router-link>

这里,tag="li" 属性告诉 <router-link> 渲染成一个 <li> 元素。active-class="active" 可以自定义激活时的类名(如果你希望不是默认的 router-link-active)。

  •  样式调整

    如果你只是想要在点击时改变样式(而不是基于路由的当前状态),你可以直接在 <li> 元素上使用 :class 绑定和条件渲染来实现点击时的样式变化。但这与 router-link-active 的用途不同,后者是基于路由状态来添加类名的。

全局配置更改默认使用 router-link-active 类名

要更改 router-link-active 的名称,你需要在创建 Vue Router 实例时,通过 linkActiveClass 选项来指定一个新的类名。这个选项应该在你的路由配置文件中设置,通常是 router/index.js 或类似的文件。

// router/index.js  
import Vue from 'vue';  
import Router from 'vue-router';  
import Home from '@/views/Home.vue';  Vue.use(Router);  const router = new Router({  mode: 'history',  base: process.env.BASE_URL,  routes: [  {  path: '/',  name: 'home',  component: Home  },  // 其他路由...  ],  // 更改 router-link-active 的名称  linkActiveClass: 'custom-active-class'  
});  export default router;

在这个例子中,linkActiveClass: 'custom-active-class' 将 router-link-active 的默认类名更改为 custom-active-class。现在,当 <router-link> 组件对应的路由被激活时,Vue Router 将不再添加 router-link-active 类名,而是添加 custom-active-class

你需要在你的CSS文件中相应地更新这个类名的样式:

/* 全局样式文件或组件样式文件 */  
.custom-active-class {  /* 你的激活样式 */  color: red; /* 示例:将激活的链接颜色更改为红色 */  
}

请注意,linkActiveClass 只影响 <router-link> 组件的激活状态类名。如果还想要更改精确匹配时的类名(默认为 router-link-exact-active),可以使用 linkExactActiveClass 选项来指定一个新的类名。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/49257.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数字IC后端流程简述

1. 设计输入 目标:接收前端设计(如RTL代码和约束文件)的输出。 工具:前端设计工具(如Synopsys Design Compiler或Cadence Genus)。 步骤: 确保前端设计的RTL代码经过综合并生成了门级网表(Netlist)。 收集约束文件(Constraints),如时序约束(SDC文件)、功率约束等…

JMeter的使用方法

软件安装&#xff1a; 参考链接&#xff1a;JMeter 下载安装及环境配置&#xff08;包含jdk1.8安装及配置&#xff09;_jmeter5.2.1需要什么版本的jdk-CSDN博客 前置知识储备&#xff1a; JMeter的第一个案例 增加线程数 线程&#xff08;thread&#xff09;是操作系统能够进…

ROS2入门到精通—— 2-8 ROS2实战:机器人安全通过狭窄区域的方案

0 前言 室内机器人需要具备适应性和灵活性&#xff0c;以便在狭窄的空间中进行安全、高效的导航。本文提供一些让机器人在狭窄区域安全通过的思路&#xff0c;希望帮助读者根据实际开发适当调整和扩展 1 Voronoi图 Voronoi图&#xff1a;根据给定的一组“种子点”&#xff0…

【数据挖掘】词云分析

目录 1. 词云分析 2. Python 中的 WordCloud 库 1. 词云分析 词云&#xff08;Word Cloud&#xff09;是数据可视化的一种形式&#xff0c;主要用于展示文本数据中单词的频率和重要性。它具有以下几种主要用途和意义&#xff1a; 1. 文本分析 • 识别关键主题&#xff1a;通…

微信小程序 async-validator 表单验证 第三方包

async-validator 是一个基于 JavaScript 的表单验证库&#xff0c;支持异步验证规则和自定义验证规则 主流的 UI 组件库 Ant-design 和 Element 中的表单验证都是基于 async-validator 使用 async-validator 可以方便地 构建表单中逻辑&#xff0c;使得错误提示信息更加友好和灵…

2、程序设计语言基础知识

这一章节的内容在我们的软件设计师考试当中&#xff0c;考的题型比较固定&#xff0c;基本都是选择题&#xff0c;分值大概在2~4分左右。 而且考的还多是程序设计语言的一些基本语法&#xff0c;特别是这两年比较火的Python。 所以对于有一定要编程基础的即使本章的内容不学习&…

独孤思维:即便副业卷,也能继续赚钱

01 前段时间独孤倒腾了一下午&#xff0c;终于整出了第一个关于独孤ip的短视频内容。 之所以搞这么久&#xff0c;独孤一直在调整封面&#xff0c;视频尺寸&#xff0c;内容抽帧&#xff0c;背景音乐和文案。 独孤是处女座。 所有的环节&#xff0c;都必须让自己看着舒服满…

AI学习记录 - 图像识别的基础入门

代码实现&#xff0c;图像识别入门其实非常简单&#xff0c;这里使用的是js&#xff0c;其实就是把二维数组进行公式化处理&#xff0c;处理方式如上图&#xff0c;不同的公式代表的不同的意义&#xff0c;这些意义网上其实非常多&#xff0c;这里就不细讲了。 const getSpecif…

JavaScript构造函数小挑战

// 编码挑战 #1 /* 使用构造函数实现一辆汽车。一辆汽车有一个品牌和一个速度属性。speed 属性是汽车当前的速度&#xff0c;单位为 km/h&#xff1b; a. 执行一个 “accelerate ”方法&#xff0c;将汽车的速度提高 10&#xff0c;并将新速度记录到控制台&#xff1b; 3. a.…

VSCode python autopep8 格式化 长度设置

ctrl, 打开设置 > 搜索autopep8 > 找到Autopep8:Args > 添加项--max-line-length150

等保测评练习卷17

等级保护初级测评师试题17 姓名: 成绩: 判断题(101=10分)1. 关于安全区域边界的安全审计,三级系统的要求包括应对审计进程进行保护,防止未经授权的中断。( F ) 是安全计算环境的安全审计 2.…

前端循环依赖

前端中循环依赖 什么是循环依赖: 两个以上模块之间互相引用&#xff0c;构成闭环依赖。 保持依赖引入的单向流通性&#xff01; 示例&#xff1a; 不要觉得自己不会写出这样的代码&#xff0c;当项目庞大后一旦出现这样的问题将会造成无法排查的问题。 // 在a.js 引用 b.js …

秋招突击——7/22——复习{堆——前K个高频元素}——新作{回溯——单次搜索、分割回文串。链表——环形链表II,合并两个有序链表}

文章目录 引言复习堆堆——前K个高频元素个人实现复习实现二参考实现 新作单词搜索个人实现参考实现 分割回文串个人实现参考实现 环形链表II个人实现参考实现 两个有序链表个人实现 总结 引言 又是充满挑战性的一天&#xff0c;继续完成我们的任务吧&#xff01;继续往下刷&a…

WebRTC QoS方法十三.2(Jitter延时的计算)

一、背景介绍 一些报文在网络传输中&#xff0c;会存在丢包重传和延时的情况。渲染时需要进行适当缓存&#xff0c;等待丢失被重传的报文或者正在路上传输的报文。 jitter延时计算是确认需要缓存的时间 另外&#xff0c;在检测到帧有重传情况时&#xff0c;也可适当在渲染时…

【目标检测实验系列】EMA高效注意力机制,融合多尺度特征,助力YOLOv5检测模型涨点(文内附源码)

1. 文章主要内容 本篇博客主要涉及多尺度高效注意力机制&#xff0c;融合到YOLOv5s模型中&#xff0c;增加模型提取多尺度特征的能力&#xff0c;助力模型涨点。&#xff08;通读本篇博客需要7分钟左右的时间&#xff09;。 2. 简要概括 论文地址&#xff1a;EMA论文地址 如下…

Blender材质-PBR与纹理材质

1.PBR PBR:Physically Based Rendering 基于物理的渲染 BRDF:Bidirection Reflectance Distribution Function 双向散射分散函数 材质着色操作如下图&#xff1a; 2.纹理材质 左上角&#xff1a;编辑器类型中选择&#xff0c;着色器编辑器 新建着色器 -> 新建纹理 -> 新…

音视频入门基础:H.264专题(17)——FFmpeg源码获取H.264裸流文件信息(视频压缩编码格式、色彩格式、视频分辨率、帧率)的总流程

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…

U447601 星月的建筑游戏题解

题目链接 解题思路 solution1 动态规划题目&#xff0c;略微复杂。 状态非常好设计&#xff0c;设 f i f_i fi​表示使用前i个木棍可以获得的最大积分。 然后暴力枚举来选择建筑材料的区间 [ i 1 , j ] [i1,j] [i1,j],接着就在这个区间中枚举 a , b , c a,b,c a,b,c(其实…

【开源库编译 | zlib】 zlib库最新版本(zlib-1.3.1)在Ubuntu(Linux)系统下的 编译 、交叉编译(移植)

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

《书生大模型实战营第3期》入门岛 学习笔记与作业:Git 基础知识

文章大纲 Git 是什么&#xff1f;-- 分布式版本控制系统版本控制系统简介Git 基本概念1. 安装 Git1.1 Windows 系统1.2 Linux 系统 2. Git 托管平台3. 常用 Git 操作4. tips4.1 全局设置 vs. 本地设置4.2 如何配置4.3 验证设置4.4 Git 四步曲 5. 常用插件6. 常规开发流程 作业其…