v3: KeepAlive的使用

背景：点击nav标签切换的时候页面的搜索条件还要存在
实现：通过KeepAlive缓存实现
代码如下：

路由配置
{
      path: 'deliveryList',
      name: 'deliveryList',
      component: () => import('@/views/orderManage/overseasOrder/delivery/index.vue'),
      meta: {
        locale: 'menu.orderManage.overseasOrder.deliveryListOrder',
        requiresAuth: true,
        role: ['*'],
        isShow: false,
        code: 'OMS:I:overseasOrder:deliveryList',
        keepAlive: true
      }
    },
    // 订单详情页
    {
      path: 'OverseasOrderItemPage',
      name: 'OverseasOrderItemPage',
      component: () => import('@/views/orderManage/overseasOrder/orderList/components/orderItemPage.vue'),
      meta: {
        locale: 'menu.orderManage.overseasOrder.unpackingOrder',
        requiresAuth: true,
        role: ['*'],
        isShow: false,
        code: 'OMS:I:overseasOrder:OverseasOrderItemPage',
        keepAlive: false
      },
    }
  
1.所有组件都缓存
<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive >
      <component :is="Component" :key="route.path"></component>
    </keep-alive>
  </router-view>
</template>
<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue'
import { useRouter } from 'vue-router';
export default defineComponent({
   name: 'OversearOrderManage',
  })
</script>
2. 包含组件或排除组件缓存(----它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项---)
<template>
  <router-view v-slot="{ Component, route }">
    <!-- 包含需要缓存的数组 -->
    <!-- <keep-alive :include="includeList"> -->
      <!-- 排除不需要缓存的数组 -->
    <keep-alive :exclude="includeList">
      <component :is="Component" :key="route.path"></component>
    </keep-alive>
  </router-view>
</template>

<script lang="ts">
import { defineComponent, reactive, watch, toRefs } from 'vue'
import { useRouter } from 'vue-router';

export default defineComponent({
   name: 'OversearOrderManage',
   setup(){
      const state = reactive<any>({
        includeList: []
      })
      const route = useRouter()
      watch(() => route,(newVal:any,oldVal)=>{
        //包含需要缓存数组的判断
        // if(newVal.currentRoute.value.meta.keepAlive && !state.includeList.includes(newVal.currentRoute.value.name)){
       // 排除需要缓存数组的判断
       if(!newVal.currentRoute.value.meta.keepAlive && !state.includeList.includes(newVal.currentRoute.value.name)){
          state.includeList.push(newVal.currentRoute.value.name);
          console.log(state.includeList);
        }
      },{deep:true}) // 开启深度监听
      return{
        ...toRefs(state)
      }
    }
  })
</script>