第三十四章 Vue路由进阶之声明式导航(导航高亮)

目录

一、导航高亮

1.1. 基于语法

1.2. 主要代码 

二、声明式导航的两个类名

2.1. 声明式导航类名匹配方式

2.2. 声明式导航类名样式自定义 

​2.3. 核心代码


一、导航高亮

1.1. 基于语法

在Vue中通过VueRouter插件,我们可以非常简单的实现实现导航高亮效果

VueRouter 提供了一个全局组件 router-link (取代 a 标签)

① 能跳转,配置 to 属性指定路径(必须) 。

,但是to标签中填写的路径无需 #

a标签的写法:

router-link写法:

② 能高亮,默认就会提供高亮类名,可以直接设置高亮样式

我们通过开发者工具可以看到,router-link的本质还是 a 标签

1.2. 主要代码 

<template><div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></div></div>
</template><script>
export default {};
</script><style>
body {margin: 0;padding: 0;
}
.footer_wrap {position: relative;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a:hover {background-color: #555;
}
</style>

二、声明式导航的两个类名

2.1. 声明式导航类名匹配方式

我们发现 router-link 自动给当前导航添加了 两个高亮类名

① router-link-active 模糊匹配 (用的多)

to="/my" 可以匹配 /my /my/a /my/b ....

② router-link-exact-active 精确匹配

to="/my" 仅可以匹配 /my

2.2. 声明式导航类名样式自定义 

我们已经看到router-link默认给我们添加了两个高亮类名,所以我们可以通过修改这两个类名的样式属性,来自定义修改高亮的颜色及其他样式效果:

 2.3. 核心代码

其余代码不变,照搬前面的即可

App.vue

<template><div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></div></div>
</template><script>
export default {};
</script><style>
body {margin: 0;padding: 0;
}
.footer_wrap {position: relative;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a.router-link-active {background-color: purple;
}
.footer_wrap a:hover {background-color: #555;
}
</style>

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

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

相关文章

第七部分:1. STM32之ADC实验--单通道实验

主要利用一个模拟量的电位器来实时改变电压值&#xff0c;通过STM32自带的ADC通道来采集这个数据&#xff0c;并打印出来&#xff01; 一句话&#xff0c;学完STM32&#xff0c;我就往南走&#xff0c;我的工资只有5000.~~~~Whappy

Ubuntu20.04两种安装及配置中文界面、输入法、换源、共享文件夹实现,及注意事项

虚拟机安装法 1、新建虚拟机&#xff0c;自定义下一步 任意指定路径 提高处理器数量能加快系统响应 完成以后不要运行&#xff0c;添加镜像文件 导入镜像文件&#xff0c;点击浏览 选择后打开->确认->运行虚拟机 出现这种情况就需要检查虚拟机的配置&#xff0c;操作系统…

记录解决vscode 登录leetcode中遇到的问题

1. 安装完 leetcode 点击sign in to leetcode 点击打开网站登录leetcode&#xff0c;发现网页无法打开。 解决办法&#xff1a;将leetcode.cn.js文件中的leetcode-cn.com路径都改成leetcode.cn 2. 继续点击 sign in to leetcode &#xff0c;选择使用账号登录&#xff0c;始…

docker镜像仓库实战

docker镜像仓库实战 搭建一个nginx服务基础知识(Web服务器)查找nginx镜像拉取镜像启动nginx镜像 搭建一个nginx服务 基础知识(Web服务器) Web 服务器&#xff0c;一般是指“网站服务器”&#xff0c;是指驻留于互联网上某种类型计算机的程序。Web 服务器可以向 Web 浏览器等客…

zabbix安装配置与使用

zabbix Zabbix的工作原理如下: 监控部分: Zabbix Agent安装在各个需要监控的主机上,它以主配置的时间间隔(默认60s)收集主机各项指标数据,如CPU占用率、内存使用情况等。 通讯部分: Agent会把收集的数据通过安全通道(默认10051端口)发送到Zabbix Server。Server会存储这些数…

CSS的三个重点

目录 1.盒模型 (Box Model)2.位置 (position)3.布局 (Layout)4.低代码中的这些概念 在学习CSS时&#xff0c;有三个概念需要重点理解&#xff0c;分别是盒模型、定位、布局 1.盒模型 (Box Model) 定义&#xff1a; CSS 盒模型是指每个 HTML 元素在页面上被视为一个矩形盒子。…

关于LLC知识23(频率越大变压器体积越小?)

为什么频率越高&#xff0c;同样的磁芯就可以用的更小&#xff1f; 变压器他负责的功能是 1、隔离 2、能量传递 这里主要是与能量传递有关 我们首先要知道&#xff0c;次级的输出功率一定的情况下&#xff0c;那么在一定的时段内消耗的能量就是一定的&#xff0c;比如1000W…

UE5.4 PCG Layered Biomes插件

B站学习链接 官方文档 一、PCGSpawn Preset&#xff1a;负责管理PCG要用到的植被资产有哪些 二、BiomesSettings&#xff1a;设置要使用的植被资产Layer、Spawn参数 1.高度Layer参数&#xff1a; 2.地形Layer&#xff1a;我这里用地形样条线绘制了一块地形Layer 绘制点和…

数字后端零基础入门系列 | Innovus零基础LAB学习Day8

###LAB15 Detail Routing for Signal Integrity, Timing, Power and Design for Yield 这个章节虽然标题有点长&#xff0c;但不要被它吓到&#xff0c;其实这个章节就是Innovus工具的绕线Routing。只不过这个阶段做Route不是仅仅是把所有的逻辑连接&#xff0c;用实际的金属层…

量化交易 股市技术指标

股市数据分类 股票数据根据信息来源和分析方法的不同&#xff0c;可以分为技术面数据和基本面数据。 技术面数据和基本面数据都是股票分析中重要的工具&#xff0c;它们提供了不同的视角和方法来评估股票的投资价值。投资者可以综合运用这两类数据&#xff0c;从技术面和基本…

【从零开始的LeetCode-算法】3222. 求出硬币游戏的赢家

给你两个 正 整数 x 和 y &#xff0c;分别表示价值为 75 和 10 的硬币的数目。 Alice 和 Bob 正在玩一个游戏。每一轮中&#xff0c;Alice 先进行操作&#xff0c;Bob 后操作。每次操作中&#xff0c;玩家需要拿出价值 总和 为 115 的硬币。如果一名玩家无法执行此操作&#…

MR30分布式IO模块与高效PLC协同

在现代工业自动化领域中&#xff0c;数据采集与控制系统扮演着至关重要的角色。其中&#xff0c;可编程逻辑控制器&#xff08;PLC&#xff09;和分布式IO模块&#xff08;Distributed I/O Modules&#xff09;是这一领域的两大核心组件。本文将详细介绍MR30分布式IO模块与PLC如…

贝尔不等式的验证

在量子计算机上运行一个实验&#xff0c;以演示使用Estimator原型违反CHSH不等式。 import numpy as npfrom qiskit import QuantumCircuit from qiskit.circuit import Parameter from qiskit.quantum_info import SparsePauliOpfrom qiskit_ibm_runtime import QiskitRuntim…

CSRF与SSRF

csrf(跨站请求伪造)的原理: csrf全称是跨站请求伪造(cross-site request forgery)&#xff0c;也被称为one-click attack 或者 session riding scrf攻击利用网站对于用户网页浏览器的信任&#xff0c;劫持用户当前已登录的web应用程序&#xff0c;去执行分用户本意的操作。 利…

Pr 视频效果:ASC CDL

视频效果/颜色校正/ASC CDL Color Correction/ASC CDL ASC CDL ASC CDL效果通过对红、绿、蓝三个原色通道的独立调整&#xff0c;实现对图像色彩的精确控制。在此基础上&#xff0c;还可用于调整处理后图像的整体饱和度。 ◆ ◆ ◆ 效果选项说明 斜率 Slope、偏移 Offset和功…

Edge 浏览器插件开发:图片切割插件

Edge 浏览器插件开发&#xff1a;图片切割插件 在图片处理领域&#xff0c;按比例切割图片是一个常见需求。本文将带你开发一个 Edge 浏览器插件&#xff0c;用于将用户上传的图片分割成 4 个部分并自动下载到本地。同时&#xff0c;本文介绍如何使用 cursor 辅助工具来更高效…

docker desktop使用ubuntu18.04带图形化+运行qemu

记录一下docker desktop使用ubuntu18.04带图形化命令和使用步骤 1. 下载镜像 参考&#xff1a;【Docker教程】Docker部署Ubuntu18.04(带图形化界面) 命令&#xff1a; docker pull kasmweb/ubuntu-bionic-desktop:1.10.02. 启动镜像 命令&#xff1a; docker run -d -it …

Transformer和BERT的区别

Transformer和BERT的区别比较表&#xff1a; 两者的位置编码&#xff1a; 为什么要对位置进行编码&#xff1f; Attention提取特征的时候&#xff0c;可以获取全局每个词对之间的关系&#xff0c;但是并没有显式保留时序信息&#xff0c;或者说位置信息。就算打乱序列中token…

基于STM32的工厂短距离安防巡逻机器人设计:ZIgBee、OpenCV、人工智能(AI)算法(代码示例)

一、项目概述 随着工业化的迅速发展&#xff0c;工厂的安全管理显得尤为重要。为了提高工厂的安全性&#xff0c;我们设计了一款基于STM32的安防巡逻机器人。该机器人能够在工厂内部自主巡逻&#xff0c;实时监控环境&#xff0c;并通过多种传感器和智能算法进行异常检测和处理…

Istio基本概念及部署

一、Istio架构及组件 Istio服务网格在逻辑上分为数据平面和控制平面。 控制平面&#xff1a;使用全新的部署模式&#xff1a;Istiod&#xff0c;这个组件负责处理Sidecar注入&#xff0c;证书颁发&#xff0c;配置管理等功能&#xff0c;替代原有组件&#xff0c;降低复杂度&…