后臺管理系統-14-vue3之tag標簽頁的實現

文章目錄

  • 1 tag靜態實現
    • 1.1 CommonTag.vue(el-tag)
    • 1.2 Main.vue(普通組件標簽)
  • 2 tag通過pinia管理
    • 2.1 CommonAside.vue(菜單點擊事件)
    • 2.2 stores/index.js(selectMenu()和tags)
    • 2.3 CommonTag.vue(計算屬性tags)
  • 3 點擊tag之后跳轉到指定頁面
    • 3.1 views/Mail.vue(商品)
    • 3.2 router/index.js(添加子路由)
    • 3.3 CommonTag.vue(標簽點擊事件)
  • 4 關閉標簽tag
    • 4.1 CommonTag.vue(標簽關閉事件)
    • 4.2 stores/index.js(updateTags())
  • 5 整體代碼CommonTag.vue

通過pinia管理標簽tag,點擊標簽可以跳轉到指定頁面。

1 tag靜態實現

在這里插入圖片描述

1.1 CommonTag.vue(el-tag)

el-tag是Element Plus組件庫中的一個常用組件,用于標記和分類。
(1)Vue要求v-for中必須有唯一的key,用于高效更新DOM。
這里使用tag.name作為唯一標識(例如’home’)。
(2)動態綁定closable屬性。
只有當標簽的name不是’home’時,才顯示關閉按鈕。
所以首頁標簽(name為’home’)不可關閉,其他標簽可以關閉。
(3)動態綁定effect屬性,控制標簽的視覺效果。
如果當前路由的名稱(route.name)等于這個標簽的name,則使用’dark’效果(深色背景);
否則使用’plain’效果(淺色背景)。
實現了“當前頁面對應的標簽高亮顯示”的功能。
(4)調用useRoute()獲取當前的路由對象,并賦值給route變量。
后面模板中用到的route.name就是從此而來。

<template

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

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

相關文章

CMake2: CMakeLists.txt的常用命令

參考鏈接: 愛編程的大丙 | CMake教程 CMakeLists指令以及常用方法 現代 CMake 教程 文章目錄1. cmake_minimum_required( )2. project( )3. add_executable( )4. set()5. aux_source_directory( )6. file( )7. include_directories( )8. add_library( )9. link_libraries()與li…

Ansible入門:自動化運維基礎

Ansible 基礎概念與安裝1. 自動化動機 (Motivation for Automation)概念解釋&#xff1a; 指為什么要用Ansible等工具來替代手動管理服務器。核心動機包括&#xff1a;效率與速度&#xff1a; 同時在上百甚至上千臺服務器上執行任務&#xff0c;秒級完成&#xff0c;遠非人工可…

【測試】基于博客系統的測試報告

前言 本篇博客對簡易的博客系統做的測試總結一份測試報告&#xff0c;包含功能測試&#xff0c;自動化測試&#xff0c;性能測試 &#x1f493; 個人主頁&#xff1a;zkf ? 文章專欄&#xff1a;測試 若有問題 評論區見&#x1f4dd; &#x1f389;歡迎大家點贊&#x1f44d;…

Oracle:配置讓插入語句時id自動輸入

Oracle:配置讓插入語句時id自動輸入無需手動指定&#xff0c;核心是利用 序列&#xff08;Sequence&#xff09; 或 自增列&#xff08;Identity Column&#xff09; 來自動生成唯一值。以下是兩種常用方案&#xff1a;方案 1&#xff1a;使用序列&#xff08;Sequence&#xf…

秒殺服務的回調方案

在秒殺場景中&#xff0c;用戶點擊“搶購”后&#xff0c;后端需要通過異步處理應對高并發&#xff08;避免請求阻塞&#xff09;&#xff0c;同時需通過實時回調機制將最終結果&#xff08;成功/失敗&#xff09;推送給客戶端并展示。核心方案是&#xff1a;“前端發起請求→后…

php apache無法接收到Authorization header

Apache 默認不傳遞 Authorization頭到后端環境&#xff08;如 PHP&#xff09;。其表現是&#xff1a;print_r($_SERVER)時&#xff0c; 沒有 [Authorization] &#xff1a;Array ([Accept-Language] > zh,en;q0.9,zh-CN;q0.8,en-US;q0.7[Accept-Encoding] > gzip, defla…

當我們想用GPU(nlp模型篇)

在個人設備上“把 GPU 真正用起來”做 NLP&#xff0c;分五步&#xff1a;準備 → 安裝 → 驗證 → 訓練/推理 → 踩坑排查。下面每一步都給出可復制命令和常見錯誤。 ────────────────── 1. 硬件準備 ? 一張 NVIDIA GPU&#xff0c;算力 ≥ 6.1&#xff08…

CryptSIPVerifyIndirectData函數分析

可以使用此函數從SIP接口對應的文件中提取簽名信息 CryptSIPVerifyIndirectData&#xff1a;將當前文件的哈希結果做為“指紋”&#xff0c;并與從CryptSIPGetSignedDataMsg中提取的簽名信息進行比較。 如果哈希結果相同&#xff0c;則意味著當前文件與之前簽名的文件相同&…

20250823解決榮品RD-RK3588-MID開發板在充電的時候大概每10s屏幕會像水波紋閃爍一下

20250823解決榮品RD-RK3588-MID開發板在充電的時候大概每10s屏幕會像水波紋閃爍一下 2025/8/23 17:58【結論】&#xff1a;使用直流電源供電&#xff0c;給電池【快速】充電&#xff0c;但是直流電源的電壓穩定&#xff0c;電流抖動導致的&#xff01;那個是2.4G 已經知道了我司…

CANN安裝

前提條件 請參考本文檔正確安裝和使用CANN軟件,不建議將CANN安裝在共享磁盤后,通過掛載的方式使用CANN,因為CANN對文件系統有文件鎖的依賴,部分共享存儲不支持文件鎖,可能導致任務拉起失敗。 root用戶和非root用戶安裝CANN軟件包的步驟一致,當前示例步驟以非root用戶為例…

docker的基礎配置

目錄 數據卷 數據卷容器 端口映射與容器互聯 互聯機制實現便捷互訪(基于容器搭建論壇) 數據卷 1.創建數據卷 [rootopenEuler-1 /]# docker volume create test test [rootopenEuler-1 /]# docker volume ls DRIVER VOLUME NAME local test [ro…

VSCode Import Cost:5 分鐘學會依賴瘦身

一句話作用&#xff1a;在代碼里 import 時&#xff0c;實時顯示包大小&#xff0c;幫你一眼揪出體積炸彈。1?? 30 秒安裝 & 啟動 打開 VSCode → 擴展商店搜索 Import Cost → 安裝重啟 VSCode&#xff0c;立即生效&#xff0c;零配置。2?? 使用方式&#xff08;開箱即…

TCP/UDP詳解(一)

UDP報文源端口16bit 目的端口16bit校驗和checksum16bit 總長度16bit--------------------------------------------------------------------------------------------------------------------------源目端口用于標識應用層協議&#xff0c;分為知名端口&#x…

數據庫優化提速(一)之進銷存庫存管理—仙盟創夢IDE

從存儲過程到通用 SQL&#xff1a;進銷存系統的數據操作優化在進銷存系統的開發與維護中&#xff0c;數據庫查詢語句的編寫方式對系統的性能、兼容性和可維護性有著深遠影響。本文將圍繞給定的三段 SQL 代碼展開&#xff0c;深入探討將存儲過程轉換為通用 SQL 在進銷存場景下的…

Redis面試精講 Day 28:Redis云原生部署與Kubernetes集成

【Redis面試精講 Day 28】Redis云原生部署與Kubernetes集成 在當今微服務與容器化浪潮中&#xff0c;Redis作為高性能緩存和消息中間件&#xff0c;已從單機部署逐步演進為云原生環境下的核心組件。Day 28 聚焦“Redis云原生部署與Kubernetes集成”&#xff0c;深入解析如何在…

leetcode刷題記錄03——top100題里的6道簡單+1道中等題

leetcode刷題記錄03——top100題里的6道簡單1道中等題上一篇博客&#xff1a; leetcode刷題記錄01——top100題里的7道簡單題 leetcode刷題記錄02——top100題里的7道簡單題 有效的括號 看懂需要用棧了&#xff0c;但是不知道怎么去寫&#xff0c;看了題解mark下正確答案。 cla…

求單位球內滿足邊界條件 u = z3 的調和函數

問題 6&#xff1a;在區域 {x2y2z2≤1}\{x^{2}y^{2}z^{2}\leq 1\}{x2y2z2≤1} 內找到一個調和函數 uuu&#xff0c;使得在邊界 x2y2z21x^{2}y^{2}z^{2}1x2y2z21 上&#xff0c;uuu 等于 gz3gz^{3}gz3。 提示&#xff1a;根據第8.1節&#xff0c;解必須是一個三次調和多項式&…

AAA 服務器與 RADIUS 協議筆記

一、AAA 服務器概述1. 核心定義AAA 是認證&#xff08;Authentication&#xff09;、授權&#xff08;Authorization&#xff09;和計費&#xff08;Accounting&#xff09; 的簡稱&#xff0c;是網絡安全領域中實現訪問控制的核心安全管理機制&#xff0c;通過整合三種服務確保…

Vue3源碼reactivity響應式篇之數組代理的方法

概覽 vue3中對于普通的代理包含對象和數組兩類&#xff0c;對于數組的方法是重寫了許多方法&#xff0c;具體實現參見packages\reactivity\src\arrayInstrumentations.ts arrayInstrumentations實際上就是一個對象&#xff0c;對象的屬性就是數組的方法&#xff0c;屬性值就是重…

如何玩轉K8s:從入門到實戰

一、K8S介紹及部署 1 應用的部署方式演變 部署應用程序的方式上&#xff0c;主要經歷了三個階段&#xff1a; 傳統部署&#xff1a;互聯網早期&#xff0c;會直接將應用程序部署在物理機上 優點&#xff1a;簡單&#xff0c;不需要其它技術的參與 缺點&#xff1a;不能為應用…