一二級路由之間的傳參方式以及高亮問題

實現如下圖所示的一二級路由的高亮情況:

在一級路由APP.vue下設置:
?

.head a.router-link-active {background-color: rgb(235, 221, 204);
}

在二級路由Mycenter.vue下設置:
?

/* 要求在點擊跳轉到mycenter_lianxi頁面時候父路由保持高亮 */
.con_left a.router-link-exact-active {color: #fff;background-color: rgb(235, 221, 204);border-radius: 5px;padding: 10px;margin-right: 20px;
} 

統一路徑大小寫(重要)

確保所有路徑使用統一的小寫格式(Vue Router默認區分大小寫):

// 路由配置中統一使用小寫
path: '/mycenter'// 所有鏈接中使用小寫
<router-link to="/mycenter">

  • router-link-active:當路徑包含目標鏈接時激活(適合一級導航)

  • router-link-exact-active:僅當路徑精確匹配時激活(適合當前頁面導航)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/86961.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/86961.shtml
英文地址,請注明出處:http://en.pswp.cn/web/86961.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

前端JavaScript力扣HOT100刷題【51-100】

注&#xff1a;純手打&#xff0c;如有錯誤歡迎評論區交流&#xff01; 轉載請注明出處&#xff1a;https://blog.csdn.net/testleaf/article/details/148953015 編寫此文是為了更好地學習前端知識&#xff0c;如果損害了有關人的利益&#xff0c;請聯系刪除&#xff01; 本文章…

智能制造數字孿生集成交付生態鏈:智慧產線極速克隆,孿生重構生產周期

在智能制造的浪潮中&#xff0c;數字孿生技術正以前所未有的速度重塑制造業的生產模式。從產品設計到生產制造&#xff0c;再到運維管理&#xff0c;數字孿生通過構建物理世界的虛擬鏡像&#xff0c;實現了生產全流程的數字化映射與優化。 山東融谷信息以“智能制造數字孿生集成…

非常詳細版: dd.device.geolocation 釘釘微應用獲取定位,移動端 PC端都操作,Vue實現釘釘微應用獲取精準定位并渲染在地圖組件上

dd.device.geolocation 釘釘微應用獲取定位,釘釘微應用獲取精準定位并渲染在地圖組件上 ,手機端 PC端要都可用 【dd.device.geolocation是需要鑒權的哦】 想要的數據和效果圖 想要的數據格式 代碼 <template><div class="dialogStyles"

鴻蒙5:組件狀態共享

目錄 1. 組件狀態共享 1.1 狀態共享-父子傳值&#xff1a;Local、Param、Event 1.2 狀態共享-父子雙向綁定!! 1.3 跨代共享&#xff1a;Provider和Consumer 1.3.1 aliasName和屬性名 1.3.2 實現跨代共享 1.3.3 裝飾復雜類型&#xff0c;配合Trace一起使用 1.3.4 支持共…

【MySQL】12. C語言與數據庫的連接

1. 下載MySQL的連接庫 sudo apt install -y libmysqlclient-dev 2. MySQL連接庫的常用接口介紹 通過下面的樣例了解MYSQL的常用接口&#xff1a; #include <iostream> #include <mysql/mysql.h> using namespace std;const char *host "localhost";…

[springboot系列] 探秘JUnit 5: Java單元測試利器

介紹 JUnit 5 是一個用于 Java 編程語言的單元測試框架&#xff0c;它是 JUnit 框架的第五個版本&#xff0c;與 JUnit 4 相比&#xff0c;JUnit 5 提供了許多改進和新特性&#xff0c;包括更好的擴展性、靈活性和對現代 Java 特性的支持。 JUnit 5 由三個主要的子模塊組成&a…

開源 java android app 開發(十三)繪圖定義控件、搖桿控件的制作

文章的目的為了記錄使用java 進行android app 開發學習的經歷。本職為嵌入式軟件開發&#xff0c;公司安排開發app&#xff0c;臨時學習&#xff0c;完成app的開發。開發流程和要點有些記憶模糊&#xff0c;趕緊記錄&#xff0c;防止忘記。 相關鏈接&#xff1a; 開源 java an…

Python 庫 包 sentence-transformers

sentence-transformers 是一個非常流行的 Python 庫&#xff0c;專門用于將文本&#xff08;句子、段落、文檔&#xff09;轉換為高質量的語義向量&#xff08;嵌入&#xff09;。它基于 Transformer 架構&#xff08;如 BERT、RoBERTa、DistilBERT 等&#xff09; 的預訓練模型…

《聚類算法》入門--大白話篇:像整理房間一樣給數據分類

一、什么是聚類算法&#xff1f; 想象一下你的衣柜里堆滿了衣服&#xff0c;但你不想一件件整理。聚類算法就像一個聰明的助手&#xff0c;它能自動幫你把衣服分成幾堆&#xff1a;T恤放一堆、褲子放一堆、外套放一堆。它通過觀察衣服的顏色、大小、款式這些特征&#xff0c;把…

AutoGen(五) Human-in-the-Loop(人類在環)實戰與進階:多智能體協作與Web交互全流程(附代碼)

AutoGen Human-in-the-Loop&#xff08;人類在環&#xff09;實戰與進階&#xff1a;多智能體協作與Web交互全流程&#xff08;附代碼&#xff09; 引言&#xff1a;AI自動化的極限與人類參與的價值 在大模型&#xff08;LLM&#xff09;驅動的AI應用開發中&#xff0c;完全自…

并查集 Union-Find

目錄 引言 簡單介紹 淺淺總結 算法圖解 初始化 根節點查找 集合合并 連通性檢查 例題 大概思路 完整代碼&#xff1a; 引言 一個小小的并查集讓我們在ccpc卡了那么久(還有unordered_map,如果不是忘了map自動排序這么一回事也不至于試那么多發)&#xff0c;至今仍然心有…

書籍在行列都排好序的矩陣中找數(8)0626

題目&#xff1a; 給定一個有N*M的整型矩陣matrix和一個整數K&#xff0c;matrix的每一行和每一列都是排好序的。實現一個函數&#xff0c;判斷K是否在matrix中。 0 1 2 5 2 3 4 7 4 4 4 8 5 …

深度學習04 卷積神經網絡CNN

卷積神經網絡與人工神經網絡關系與區別 概念 卷積神經網絡&#xff08;Convolutional Neural Network, CNN&#xff09;是人工神經網絡&#xff08;Artificial Neural Network, ANN&#xff09;的一種特殊形式&#xff0c;兩者在核心思想和基礎結構上存在關聯&#xff0c;但在…

vue基礎之組件通信(VUE3)

文章目錄 前言一、父子組件通信1.父組件向子組件通信2.子組件向父組件通信3.ref父組件直接操作子組件通信。 二、跨代通信1. 跨層級通信2.事件總線通信 總結 前言 vue3的組件通信和vue2相比在語法上會有些差距&#xff0c;且vue3有的通信方式也在功能上比vue2更加完善&#xf…

【RidgeUI AI+系列】中文重復統計器

中文重復統計器 文字重復統計是一個使用文本處理工具&#xff0c; 輸入文本內容并指定最小詞長度后&#xff0c; 就能自動高亮顯示重復的詞。 本教程將會借助AI實現這個應用的開發 頁面腳本編寫 該工具的基礎流程較為清晰&#xff1a;用戶輸入一段文字后&#xff0c;調用提取…

代碼隨想錄|圖論|05島嶼數量(深搜DFS)

leetcode:99. 島嶼數量 題目 題目描述&#xff1a; 給定一個由 1&#xff08;陸地&#xff09;和 0&#xff08;水&#xff09;組成的矩陣&#xff0c;你需要計算島嶼的數量。島嶼由水平方向或垂直方向上相鄰的陸地連接而成&#xff0c;并且四周都是水域。你可以假設矩陣外均…

數據結構-第二節-堆棧與隊列

一、概念&#xff1a; 堆棧與隊列也是線性表&#xff0c;但是&#xff1a; 堆棧&#xff1a;只能在一個端進行插入刪除&#xff0c;此端稱為棧頂。&#xff08;特點&#xff1a;后來居上&#xff09; 隊列&#xff1a;在一端進行插入&#xff08;隊尾&#xff09;&#xff0…

HarmonyNext動畫大全02-顯式動畫

HarmonyOS NEXT顯式動畫詳解 1. 核心接口 顯式動畫通過animateTo接口實現&#xff0c;主要特點包括&#xff1a; 觸發方式&#xff1a;需主動調用接口觸發動畫 參數配置 &#xff1a; animateTo({duration: 1000, // 動畫時長(ms)curve: Curve.Ease, // 動畫曲線delay: 200…

芯谷科技--高壓降壓型 DC-DC 轉換器D7005

在當今電子設備日益復雜且對電源性能要求極高的背景下&#xff0c;一款高效、穩定的電源管理芯片至關重要。 D7005憑借其卓越的性能和廣泛的應用適配性&#xff0c;成為眾多工程師在設計電源方案時的優選。 產品簡介 D7005 是一款高效、高壓降壓型 DC-DC 轉換器&#xff0c;具…

MySQL的GTID詳解

GTID&#xff08;Global Transaction Identifier&#xff0c;全局事務標識符&#xff09;是MySQL 5.6及以上版本引入的重要特性&#xff0c;用于在主從復制環境中唯一標識每個事務&#xff0c;簡化復制管理、故障轉移和數據一致性維護。以下從多維度詳細介紹GTID&#xff1a; …