nav-tage、vue3.0顶部历史浏览记录代码实现 vuex + el + vue3.0

顶部导航栏 vue3.0 代码实现

作品示例：

TagsView.vue的代码实现

<template>
  <div class="content">
    <div class="content-left">
      <el-button icon="el-icon-arrow-left" type="primary" @click="handleNavClick('RIGHT')"></el-button>
      <div ref="navTagsRef" class="tags-view-container">


        <template v-for="tag in Array.from(visitedViews)"  :key="tag.path">

          <el-dropdown trigger="contextmenu">
            <el-tag
                ref="tag"
                :class="tag.path === $route.path ? 'active-el-tag' : ''"
                closable
                @click="clickTag(tag.path, tag.query)"
                @close.prevent.stop="closeSelectedTag(tag)">
              {
  { tag.meta.title }}
            </el-tag>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="closeSelectedTag(tag)">关闭</el-dropdown-item>
                <el-dropdown-item @click="closeOthersTags(tag)">关闭其他</el-dropdown-item>
                <el-dropdown-item @click="closeAllTags()">关闭所有</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </div>
    </div>

    <el-button icon="el-icon-arrow-right" type="primary" @click="handleNavClick('LEFT')"></el-button>
  </div>
</template>

<script>
import