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