vue3使用keep-alive缓存已打开过的菜单，使用el-tabs展示面包屑路由。

vuex

import { debug } from "console";
import { createStore } from "vuex";
let availButtons = new Set();
export default createStore({
    state: {
        count: 0,
        tabsList: [
            {
                path: "/",
                name: "Profile",
                meta: {
                    title: "首页",
                },
            },
        ],
        keepAliveList: ["Profile"],
        currentMenu: null,
        menu: [],
        //  按钮权限
        buttons: availButtons,
    },
    mutations: {
        // 判断按钮是否有权限
        setButtons(state, payload) {
            state.buttons = payload.buttons;
        },
      
        // 选择标签 选择面包屑
        selectMenu(state, val) {
            console.log({ val });
            if (val.path === "/") {
                // state.currentMenu = null;
            } else {
                // state.currentMenu = val.name;
                let result = state.tabsList.findIndex(
                    (item) => item.name === { ...val }.name
                );
                if (result === -1) {
                    state.tabsList.push({ ...val });
                }
                // debugger;
            }
        },
        closeTab(state, val) {
            let result = state.tabsList.findIndex(
                (item) => item.name === val.name
            );
            state.tabsList.splice(result, 1);
            state.keepAliveList.length = 0;
            state.tabsList.forEach((item) => {
                state.keepAliveList.push(item.name);
            });
        },
        updateKeepList(state, val) {
            let index = state.keepAliveList.findIndex(
                (item: any) => item.name === val.name
            );
            if (index === -1) {
                state.keepAliveList.push(val.name);
            }
        },
    },
    actions: {
        
    },
    getters: {
      
        
    },
});

component/CommonTab.vue

<template>
  <div class="tabs">
    <el-tabs
      v-model="currentName"
      type="card"
      editable
      @tab-remove="handleTabsEdit"
      @tab-click="handleTabClick"
    >
      <el-tab-pane
        editable
        :key="tag.meta.title"
        v-for="tag in tags"
        :label="tag.meta.title"
        :name="tag.meta.title"
      >
      </el-tab-pane>
    </el-tabs>
    <div>{{ tags }}</div>
  </div>
</template>
<script setup lang="ts">
import * as Utils from "@/utils";
import { mapState, mapMutations, useStore } from "vuex";
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
const currentName = ref("首页");
const tags = ref([]);
const store = useStore();
const router = useRouter();
const route = useRoute();
onMounted(() => {
  tags.value = store.state.tabsList;
  watch(
    () => route.path,
    () => {
      currentName.value = route.meta.title as string;
    },
    { immediate: true, deep: true }
  );
});
function handleClose(tag: any, index: any) {
  let length = tags.value.length - 1;
  store.commit("closeTab", tag);
  if (tag.name !== route.name) {
    return;
  }
  if (index === length) {
    router.push({ path: tags.value[index - 1].path });
  } else {
    router.push({ path: tags.value[index].path });
  }
}
function changeMenu(item: any) {
  let params = {
    path: route.path,
    name: route.name,
    meta: {
      title: route.meta.title,
    },
  };
  store.commit("selectMenu", params);
}
function handleTabsEdit(targetName: any, action: any) {
  let result = tags.value.findIndex(
    (item: any) => item.meta.title === targetName
  );
  handleClose(tags.value[result], result);
}
function handleTabClick(tab: any) {
  let result = tags.value.findIndex(
    (item: any) => item.meta.title === currentName.value
  );
  changeMenu(tags.value[result]);
  router.push({ path: tags.value[result].path });
}
</script>
<style lang="scss">
.tabs {
  line-height: 50px;
  margin-left: 18px;
  text-align: left;
  .el-tag {
    margin-right: 5px;
    cursor: pointer;
  }
  .dark {
    background: #409eff;
    border-color: #409eff !important;
    color: #fff !important;
    .el-tag__close {
      color: #fff !important;
    }
  }
  .plain {
    background: #fff;
  }
  .el-tag {
    color: #333;
    .el-tag__close {
      color: #333;
      &:hover {
        background: #cbcbce;
        font-weight: bolder;
      }
    }
    border-color: rgb(207, 204, 204);
  }
}
</style>

vue3使用keepalive写法有变化。

<router-view v-slot="{ Component }">
  <keep-alive :include="store.state.keepAliveList">
    <component :is="Component" :key="route.path" />
  </keep-alive>
</router-view>
菜单点击事件也有变化，获取的路由的上一次的路由，所以需要从菜单渲染中拿到数据。
与keepaliveList.keyValue一一对应。
const menuItemClick = (item: any) => {
  const current = router;
  let params = {
    path: item.path,
    name: item.routeName,
    meta: {
      title: item.name,
    },
  };
  store.commit("selectMenu", params);
  store.commit("updateKeepList", params); 
};