后台管理系统-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