Vue Element的TagsView是一個可以快速實現標簽欄功能的組件。TagsView通常用于管理頁面間的導航欄，允許用戶快速跳轉到其它頁面。

該組件主要包括兩個組成部分：標簽列表和頁面關閉按鈕。標簽列表動態顯示用戶訪問的頁面，頁面關閉按鈕允許用戶手動關閉當前頁面。

<template>
<div class="tags-view">
<div
v-for="(tag, index) in visitedViews"
:key="index"
class="tags-view-item"
:class="{ active: tag.path === $route.path }"
>
<router-link :to="tag.path">{{ tag.title }}</router-link>
<i class="el-icon-close" v-if="tag.path !== '/'" @click.stop="handleClose(tag)"></i>
</div>
</div>
</template>
<script>
export default {
name: 'TagsView',
computed: {
visitedViews() {
return this.$store.state.tagsView.visitedViews;
},
},
methods: {
handleClose(tag) {
this.$store.dispatch('tagsView/delVisitedViews', tag).then(() =>{
if (this.$route.path === tag.path) {
const latestView = this.$store.getters['tagsView/latestVisitedView'];
this.$router.replace(latestView.path);
}
});
},
},
};
</script>

使用Vue Element的TagsView組件可以很方便地實現標簽欄功能，用戶可以快速瀏覽和操作頁面，提供了友好的用戶體驗。