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

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

src/layout/components/TagsView/index.vue

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。