文章目錄
- 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