需求

切换标签页后，我们想要切换前的标签页的内容不变，等我切换回来的时候可以继续使用。

比如我在A标签录入了一些文字，切到其他标签B，再切回来，这段文字还在，否则每次都让用户输入，体验不行。

实现思路

1、给vuex里储存当前打开的标签页数组tabPanes，增加一个计算属性getter
2、这个getter定义一个方法keepAliveTab，获取当前打开的标签页的key
3、页面框架，给路由标签设置标签，让vue缓存路由页面
4、 标签增加一个属性include，属性值为一个数组，数组就是keepAliveTab这个getter，在这个数组里面的标签页，才会得到缓存
5、关闭标签时，tabPanes会删掉这个标签的元素，keepAliveTab会跟着变化，这样关闭的标签就不在 标签属性include里面，就不会缓存，就会卸载Unmounted

实现

1、给vuex里储存当前打开的标签页数组tabPanes，增加一个计算属性getter
2、这个getter定义一个方法keepAliveTab，获取当前打开的标签页的key

// src/store/index.js
state: () => ({
    selectedKeyStore:"index", // 当前激活的页面的标签页、菜单
    tabPanes: [  // 全局的标签页，主要是配置首页不可关闭
      webSite.firstPage,
    ],
  }),
  getters: {
    keepAliveTab:(state)=>{ // 返还当前打开标签页的key属性，组成数组，用于动态缓存标签页
      let tempTab = []
      state.tabPanes.forEach(element => {
        tempTab.push(element.key)
      });
      return tempTab
    }
  }    
//....省略了操作tabPanes的方法

3、页面框架，给路由标签设置标签，让vue缓存路由页面
4、 标签增加一个属性include，属性值为一个数组，数组就是keepAliveTab这个getter，在这个数组里面的标签页，才会得到缓存

src/views/layout/index.vue，下面是以Vue3和ant-design-vue 2.x 为例，router-view标签内是Vue3的新写法，固定写法

<template>
  <!-- 总框架 -->
  <a-layout id="baseLayout">
    <!-- 侧边栏 = logo + 菜单栏 -->
    <sidebar></sidebar>
    <!-- 主体内容 = 顶部栏 + 标签页 + 主页面 -->
    <a-layout>
      <!-- 顶部栏 -->
      <top></top>
      <!-- 主页面 -->
      <a-layout-content :style="{margin: '10px 10px',padding: '5px',background: '#fff',}">
        <!-- 路由页面，Vue3固定这样写 -->
        <router-view v-slot="{ Component }">
          <!-- include 是动态缓存标签页，只有当前打开的标签才会缓存，关闭则不缓存 -->
          <keep-alive :include="keepAlive">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import top from "/@/views/layout/top/index.vue"; // 引入顶部组件
import sidebar from "/@/views/layout/sideBar/index.vue"; // 引入侧边栏
import { computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
export default {
  name:"layout",
  components: {
    top, // 顶部菜单
    sidebar, // 菜单栏
  },
  setup() {
    const store = useStore()
    return {
      // 设置动态页面缓存，关闭标签页时去掉缓存
      keepAlive:computed(() => store.getters.keepAliveTab),
    };
  },
};
</script>

注意!!!

1、组件一定要有名字，否则keepAlive会失效

<script>
export default {
  name:"componentsName"
}
</script>

2、路由里的名字要和组件的一致，否则keepAlive会失效

const routes = [
  {
    path: '/index',
    name: 'componentsName',
    component: () => import('@/views/home/index.vue'),
    meta: {
      name: "首页"
    },
  },
]