vue怎样隐藏不需要显示的tab标签页

用户使用时每打开一个页面就会产生一个tab标签，当操作过多时，tab标签就会杂乱。为优化体验，仅主菜单项允许生成 Tab 标签，子页面将在当前标签内切换而不生成。

src/layout/components/TagsView/index.vue

<template>
  <div id="tags-view-container" class="tags-view-container container-style">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
        :style="activeStyle(tag)" @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
        @contextmenu.prevent.native="openMenu(tag, $event)">
        {{ $t(tag.meta.title) }}
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
      <li @click="closeOthersTags">关闭其他</li>
      <li @click="closeAllTags(selectedTag)">关闭所有</li>
    </ul>
  </div>
</template>

<script>

export default {
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
  },
}
</script>

src/router/index.js

在路由配置中新增 showTag 属性，用于控制是否显示 Tab 标签

{
    path: "",
    component: Layout,
    redirect: "index",
    children: [
      {
        path: "index",
        component: (resolve) =>
          require(["@/views/dashboard/index.vue"], resolve),
        name: "Index",
        meta: {
          title: "layout.home",
          icon: "dashboard",
          // noCache: true,
          affix: true,
          showTag: true, // 显示tag标签
        },
      },
    ],
  },

src/store/modules/tagsView.js

若 showTag 为 true，则将页面添加至 Tab 数组；若为 false，则不生成 Tab 标签。

const state = {
  visitedViews: [],
  cachedViews: [],
};
const mutations = {
  ADD_VISITED_VIEW: (state, view) => {
    if (state.visitedViews.some((v) => v.path === view.path)) return;
    if (!view.meta.showTag) return;    // 判断如果showTag为false则不填进数组
    state.visitedViews.push(
      Object.assign({}, view, {
        title: view.meta.title || "no-name",
      })
    );
  },
}

显示效果：在 visitedViews 中，基于 route.meta.showTag  属性，仅主菜单项生成 Tab 标签，子页面默认不生成。如子页面需显示 Tab，可在路由配置中手动设置 showTag: true。