vue3 keep-alive 根据情况来决定是否保持页面状态

1、路由页面添加 keep-alive

<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive"/>
  </router-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({});
</script>

2、在需要操持状态的页面中添加 onActivited，判断路由中的 needRefresh 参数，来决定是否保存状态，还是执行指定动作：

onActivated(() => {
  // console.log('router.currentRoute.value.name', router.currentRoute.value, pagination.value.current)
  if (router.currentRoute.value.meta.needRefresh) {
    // 执行方法
  } else {
    // 执行方法
  }
});

3、在路由守卫中根据实际情况来修改 needRefresh 的值：

router.beforeEach(async (to, from, next) => {
  to.meta.needRefresh = false;
  if (
    [
      '路由中定义的页面 name',
    ].indexOf(<string>from.name) > -1
  ) {
    to.meta.needRefresh = true;
  }