vue实现nav tabs标签页切换

效果图，支持右键关闭其他关闭全部

废话不多说直接上代码

1.页面组件tagsView.vue、scrollPane.vue

<template>
    <div class="tags-view-container">
        <scroll-pane
            class="tags-view-wrapper"
            ref="scrollPane"
        >
            <router-link
                ref="tag"
                class="tags-view-item"
                :class="isActive(tag)?'tagActive':''"
                :to="tag"
                @contextmenu.prevent.native="openMenu(tag,$event)"
                v-for="tag in Array.from(visitedViews)"
                :key="tag.path"
            >
                {
  {tag.meta.title}}
                <span
                    class="el-icon-close"
                    @click.prevent.stop='closeSelectedTag(tag)'
                ></span>
            </router-link>
        </scroll-pane>
        <ul
            class='contextmenu'
            v-show="visible"
            :style="{left:left+'px',top:top+'px'}"
        >
            <li @click="closeSelectedTag(selectedTag)">关闭</li>
            <li @click="closeOthersTags">关闭其他</li>
            <li @click="closeAllTags">关闭所有</li>
        </ul>
    </div>
</template>

<script>
import ScrollPane from "@/components/ScrollPane";
export default {
    name: "tags-view",
    components: { ScrollPane },
    data() {
        return {
            visible: false,
            top: 0,
            left: 0,
            selectedTag: {}
        };
    },
    computed: {
        visitedViews() {
            console.log("tabView");
            console.log(this.$store.state.tagsView);
            console.log(this.$store.state);
            return this.$store.state.tagsView.visitedViews;
        }
    },
    watch: {
        $route() {
            this.addViewTags();
            this.moveToCurrentTag();
        },
        visible(value) {
            if (value) {
                document.body.addEventListener("click", this.closeMenu);
            } else {
                document.body.removeEventListener("click", this.closeMenu);
            }
        }
    },
    mounted() {
        this.addViewTags();
    },
    methods: {
        generateRoute() {
            if (this.$route.name) {
                return this.$route;
            }
            return fals