效果

步骤

1.在Elementui找一个标签页组件

复制粘贴到代码

2.将他写活

将很多页面需要用的方法和变量写入store

        editableTabsValue: '2',
        editableTabs: [{
            title: '首页',
            name: 'index',
        },],

        addTab(state, tab) {
            if (state.editableTabs.findIndex(item => item.title === tab.title) === -1) {
                state.editableTabs.push({
                    title: tab.title,
                    name: tab.name,
                });
                state.editableTabsValue = tab.name;
            }
        },

3.点击事件

点击事件调用这个方法

    selectMenu(menu) {
      this.$store.commit("addTab", menu);
    },

4.优化

优化点1:解决可以重复出现标签的问题

加一个判断

            if (state.editableTabs.findIndex(item => item.title === tab.title) === -1) {
                state.editableTabs.push({
                    title: tab.title,
                    name: tab.name,
                });
                state.editableTabsValue = tab.name;
            }
        },

优化点2:首页不是子路由,所以要专门写一个

    <!-- 首页菜单项 -->
    <el-menu-item index="/sys/Index" @click="selectMenu({name:'Index',title:'首页'})">
      <template #title>
        <i class="el-icon-s-home"></i>
        首页
      </template>
    </el-menu-item>

优化点3:点击之后他不会进行一个页面的跳转

写一个点击事件

    selectMenu(menu) {
      this.$store.commit("addTab", menu);
    },

注意的点

因为我们需要再页面渲染完毕之前,将  editableTabsValue和editableTabs进行计算,所以需要写到computed里面,还有如果有get方法,就必须有set方法,否则无法进行删除

  computed: {
    editableTabs: {
      get() {
        return this.$store.state.menu.editableTabs;
      },
      set(val) {
        this.$store.state.menu.editableTabs = val
      }
    },
    editableTabsValue: {
      get() {
        return this.$store.state.menu.editableTabsValue;
      },
      set(val) {
        this.$store.state.menu.editableTabsValue = val
      }
    },
  },