vue3 keep-alive

vue3 keep-alive 在写法上和vue2是不一样的

假设此时你有 Home.vue和About.vue两个组件, 如果想全部缓存

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

如果想缓存某个组件

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

注意

如果用到include，exclude的时候，需要给组件加上name

<script>
export default {
  name: "About"
};
</script>

<script setup>
  import {onMounted, onBeforeUnmount} from 'vue'

  onMounted(()=>{
    console.log('about Mounted');
  })

  onBeforeUnmount(()=>{
    console.log('about Unmount');
  })
</script>

keep-alive注意点

1、不要在router-view上加key， router-view加key的区别
2、如果要缓存，一定要在template上加个根标签,根标签不该是router-view，不然会白屏
3、keep-alive不支持缓存孙子组件
4、一定要给组件加上name

vue3缓存白屏

如果template下面直接是router-view，路由跳转会直接白屏，这跟vue3的template设计正好相反。。

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

如何解决？

需要加上根标签，外面加一层div

<template>
  <div>
    <keep-alive include="About">
      <component :is="Component"/>
    </keep-alive>
  </div>
</template>