Vue3+Vite KeepAlive页面缓存问题

记录一个Vue3.x版本在使用KeepAlive缓存时的页面问题。

问题一：

使用KeepAlive缓存公共组件切换页面时发生错乱
错误

正常

问题二:

KeepAlive缓存页面，同一子路由参数不同下切换页面，页面内容发生错乱

以上两个问题解决方式：

Vue3.x+Router4.x下使用KeepAlive步骤

1、router–index.ts

      {
        path: '/opinion-management/opinion-add-ST',
        name: 'OptionalAddST',
        component: () => import('@/views/OpinionManagement/OpinionAddST/index.vue'),
        meta: {
          title: '新增ST舆情监控',
          keepAlive: true,  //添加缓存
        },
      },

2、App.index/AppMain.vue 配置

keep-alive属性：

include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

<template>
  <div ref="appMain" class="app-main">
    <router-view include="Tabletitle,OptionalLimitDown,OptionalStock,OpinionBacktracking,OptionalAddST">
      <template #default="{ Component }">
        <keep-alive>
          <component :is="Component" v-if="route.meta.keepAlive" :key="route.fullPath" />
        </keep-alive>
        <component :is="Component" v-if="!route.meta.keepAlive" :key="route.fullPath" />
      </template>
    </router-view>
  </div>
</template>

<script lang="ts" setup>
import { ref, provide } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const appMain = ref<HTMLElement | null>(null);

provide('appMainRef', appMain);
</script>

<style scoped>
.app-main {
  height: 100%;
  padding: 24px 24px 24px 24px;
  overflow: scroll;
  transition: margin-left 0.2s;
}

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  transform: translateX(-30px);
  opacity: 0;
}

.fade-transform-leave-to {
  transform: translateX(30px);
  opacity: 0;
}
</style>

3、相应的页面加上name名（include根据name名进行缓存）