欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

玩转Vue3的keep-alive功能

最编程 2024-08-02 20:21:20
...

vue3相比于vue2变化挺大的,在vue2中使用的时候,keep-alive是在router-view外层的。

如下:

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

<script setup lang="ts"></script>

部分组件缓存:

<template>
  <router-view v-slot="{ Component }">
    // Home、My是name属性名
    <keep-alive :include="['Home', 'My']">
      <component :is="Component"></component>
    </keep-alive>
  </router-view>
</template>

<script setup lang="ts"></script>