vue3.0 keep-alive 缓存指定页面

vue3.0 keep-alive 缓存指定页面

**vue2.0 和vue3.0 keep-alive写法是有区别，不要太过于依赖AI **！！！！

vue2的写法（不适用于vue3）

<keep-alive >
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

vue3的写法(唯一且正解的方案)

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

遇到的坑

第一种：浏览器返回

onMounted(() => {
  // nodeData = taskDetailObj.value1;
  // createFlow();
  detailDataObject.detailParams = router.currentRoute.value.query;
  getTaskDetailData();
 
  

  window.addEventListener('popstate', popStateHandle, false)
});

const popStateHandle = function () {
  // console.log('detailDataObject.searchData111',sessionStorage.getItem("sesstionParams"))
   router.push({ path:`/home/index`,query:JSON.parse(sessionStorage.getItem("sesstionParams"))})
}
onUnmounted(() => {
    window.removeEventListener('popstate',popStateHandle, false);
})

存在的问题：搜索条件是都可以带回去的，分页问题没办法解决

第二种：本地缓存

本地缓存的方法其实也是把搜索条件保存到session，遇到的问题一样，就是分页的问题

第三种：keep-alive

vue2的写法和vue3.0的写法是完全不一样的，我这里就是太相信AI了，导致了很多种方案都实现不了。

用上include后，所有的页面都不再缓存。

<div>
     <router-view  v-slot="{ Component }">
        <keep-alive >
          <component :is="Component" />
        </keep-alive>
     </router-view>
</div>

vue3的写法(唯一且正解的方案)

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