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

最新推荐文章于 2024-05-27 12:42:17 发布

Tylerdalin

最新推荐文章于 2024-05-27 12:42:17 发布

阅读量490

点赞数

本文链接：https://blog.youkuaiyun.com/LiuLin_CF/article/details/119461618

版权

本文介绍了如何在Vue3.0中使用TagsView组件和Vuex来实现顶部导航栏的历史浏览记录功能。通过提供TagsView.vue的代码示例和 vuex 的 tagsView.js 源码，详细阐述了这一实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

顶部导航栏 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>

最低0.47元/天解锁文章