【Vue】声明式导航-导航链接

文章目录

  • 一、引入
  • 二、解决方案
  • 三、代码示例
  • 四、声明式导航-两个类名
    • 1)router-link-active
    • 2)router-link-exact-active

一、引入

但凡说到声明式导航,都需要想到router-link

需求 实现导航高亮效果

68249204474

如果使用a标签进行跳转的话,需要给当前跳转的导航加样式,同时要移除上一个a标签的样式,太麻烦!!!


二、解决方案

vue-router 提供了一个全局组件 router-link (取代 a 标签)(即导航式链接)

  • 能跳转,配置 to 属性指定路径(必须) 。本质还是 a 标签 ,to 无需 #
  • 能高亮,默认就会提供高亮类名,可以直接设置高亮样式

语法: <router-link to="path的值"> 发现音乐 </router-link>

  <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>

通过router-link自带的两个样式进行高亮

使用router-link跳转后,我们发现。当前点击的链接默认加了两个class的值 router-link-exact-activerouter-link-active

我们可以给任意一个class属性添加高亮样式即可实现功能


三、代码示例

<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>

<style>
.footer_wrap a.router-link-active {
  background-color: purple;
}
</style>

四、声明式导航-两个类名

当我们使用 <router-link></router-link> 跳转时,自动给当前导航加了两个类名

单词长是为了防止和我们平时定义的类名重名

68249312105


1)router-link-active

模糊匹配(用的多)

to=“/my” 可以匹配 /my /my/a /my/b …

只要是以/my开头的路径 都可以和 to="/my"匹配到

eg:不仅要匹配/discover还要匹配/discover/toplist

image-20240202223312822

2)router-link-exact-active

精确匹配(exact)

to=“/my” 仅可以匹配 /my

代码示例

/* 
  router-link-active 模糊匹配(更多)
  to="/find"  =>  地址栏 /find   /find/one   /find/two  ...

  router-link-exact-active 精确匹配
  to="/find"  =>  地址栏 /find  
*/
.footer_wrap a.router-link-active {
  background-color: purple;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JSONPath使用指南(掌握JSON数据提取)

大家好&#xff0c;在处理 JSON&#xff08;JavaScript Object Notation&#xff09;数据时&#xff0c;有时需要从复杂的结构中提取特定部分。JSONPath 就是一个非常有用的工具&#xff0c;它提供了一种简洁而强大的方式来定位和提取 JSON 数据中的元素。无论是在 Web 开发中处…

【C++ | 析构函数】类的析构函数详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a;2024-06-06 1…

上海亚商投顾:微盘股指数大跌超6% 全市场仅500余只个股上涨

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日震荡调整&#xff0c;创业板指午后一度跌超1%&#xff0c;微盘股指数盘中跌逾7%&#xff0c;小市值个…

YOLO系列模型 pt文件转化为ONNX导出

文章目录 啥是onnx怎么导出导出之后 啥是onnx Microsoft 和合作伙伴社区创建了 ONNX 作为表示机器学习模型的开放标准。许多框架&#xff08;包括 TensorFlow、PyTorch、scikit-learn、Keras、Chainer、MXNet 和 MATLAB&#xff09;的模型都可以导出或转换为标准 ONNX 格式。 在…

09.0手工制作docker镜像-单服务ssh

手动将容器保存为镜像-单服务ssh 本页测试内容&#xff0c;将centos6.9镜像安装ssh服务并提交新的镜像并可使用。 docker commit 容器id或者容器的名字 新的镜像名字[:版本号可选] docker commit test centos6.9-ssh:v11&#xff09;基于容器制作镜像&#xff0c;首先创建一个…

DP:子序列模型

子数组vs子数列 1、子数组&#xff08;n^2&#xff09; 子序列(2^n) 2、子数组是子序列的一个子集 3、子数组必须连续&#xff0c;子序列可以不连续 一、最长递增子序列 . - 力扣&#xff08;LeetCode&#xff09; 算法原理&#xff1a; 1、状态表示&#xff…

使用命令给电脑添加虚拟网卡和IP

目录 1、添加网卡 1-1、windows系统添加网卡 1-2、Linux系统中添加网卡 2、添加IP和DNS 2-1、添加IP 2-2、 设置DNS 3、删除网卡 3-1、Windows: 3-2、Linux 3-3、macOS 4、示例&#xff1a; 首先以管理员方式进入CMD命令行&#xff1b; 点击“开始”->“管理员…

HLA高层体系结构1.0.0版本

名&#xff1a;高层体系结构&#xff08;High Level Architecture&#xff0c;HLA&#xff09; 高层体系结构&#xff08;High Level Architecture&#xff0c;HLA&#xff09;是从体系结构上建立这样一个框架&#xff0c;它能尽量涵盖M&S领域中所涉及的各种不同类型的仿真…

springboot启动配置文件-bootstrap.yml常用基本配置

4.1.5.配置文件 SpringBoot的配置文件支持多环境配置&#xff0c;基于不同环境有不同配置文件&#xff1a; 说明&#xff1a; 文件说明bootstrap.yml通用配置属性&#xff0c;包含服务名、端口、日志等等各环境通用信息bootstrap-dev.yml线上开发环境配置属性&#xff0c;虚…

微服务开发与实战Day01 - MyBatisPlus

一、微服务 概念&#xff1a;微服务是一种软件架构风格&#xff0c;它是以专注于单一职责的很多小型项目为基础&#xff0c;组合除复杂的大型应用。 课程安排&#xff1a; https://www.bilibili.com/video/BV1S142197x7/?spm_id_from333.1007.top_right_bar_window_history.…

41【Aseprite 作图】粉红宫灯——拆解

1 宫灯轮廓 上面三角&#xff0c;下面3 3 3 &#xff08;粉色在后面&#xff0c;做轮廓&#xff09;&#xff0c;棕色在外面&#xff0c;看做是灯骨&#xff08;竖着更长&#xff09;&#xff1b;中间是横着做灯骨 尾部的彩带&#xff0c;下面粉色更浅&#xff0c;上面绿色更浅…

LabVIEW飞机发动机测试与故障诊断系统

LabVIEW飞机发动机测试与故障诊断系统 基于LabVIEW开发了一个飞机发动机测试与故障诊断系统&#xff0c;能够实时监测发动机的运行参数&#xff0c;进行数据采集与分析&#xff0c;并提供故障诊断功能。系统采用高精度传感器和数据采集硬件&#xff0c;适用于发动机的性能测试、…

Kaggle——Deep Learning(使用 TensorFlow 和 Keras 为结构化数据构建和训练神经网络)

1.单个神经元 创建一个具有1个线性单元的网络 #线性单元 from tensorflow import keras from tensorflow.keras import layers #创建一个具有1个线性单元的网络 modelkeras.Sequential([layers.Dense(units1,input_shape[3]) ]) 2.深度神经网络 构建序列模型 #构建序列模型 …

在k8s中部署Logstash多节点示例(超详细讲解)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《洞察之眼&#xff1a;ELK监控与可视化》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Logstash简介 2、在K8s中部署Logstash多节点实例…

简单聊聊大数据分析的方法有什么

大数据分析是指对规模巨大的数据集合进行的分析过程。 这些数据集合通常具有以下几个特点&#xff0c;可以概括为5个V&#xff1a; 1.数据量大&#xff08;Volume&#xff09;&#xff1a;大数据分析处理的数据量巨大&#xff0c;远远超出了传统数据处理软件的能力范围。 2.…

MySQL Shell 使用指南

前言&#xff1a; MySQL Shell 是官方提供的 MySQL 周边适配组件&#xff0c;是新一代的高级客户端&#xff0c;在 MySQL 8.0 及其以后的版本得以慢慢推广应用。之前笔者因为 MySQL 8.0 用得比较少&#xff0c;一直没有详细使用过这个工具&#xff0c;近期在捣鼓 MySQL 8.0&am…

从入门到精通:Java Lambda运算符详解!

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

力扣 48.旋转图像

题目描述&#xff1a; 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],…

Alibbaba RocketMQ笔记

作用场景 异步解耦: 将比较耗时且不需要即时(同步)返回结果 的操作放入消息队列; 流量削峰: 历史简介 基本使用 深入了解\原理

泛型基础及深入

泛型深入 泛型定义&#xff1a; JDK5引入的特性&#xff0c;可以在编译阶段约束操作的数据类型&#xff0c;并进行检查 泛型格式&#xff1a; <数据类型> 注意&#xff1a;泛型只能支持引用数据类型 优势&#xff1a; 统一数据类型&#xff1b; 把运行时期的问题提前到…