keep-alive的使用

最新推荐文章于 2025-04-29 19:21:30 发布

原创最新推荐文章于 2025-04-29 19:21:30 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webview #vue.js #html

前端同时被 2 个专栏收录

17 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文探讨了在Vue3.0环境下，使用keep-alive组件进行页面缓存遇到的问题及其解决方案。传统的写法似乎无法正常工作，但通过动态组件和include属性的使用，成功实现了组件的缓存。示例代码展示了如何在router-view中结合keep-alive实现Home和About组件的缓存控制。

使用vue3.0搭建项目，自由的两个组件，Home和about

在之前常见的写法中，使用keep-alive会被缓存？在网上搜寻答案都是可以的，但是实践起来确实不行

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

在vue3.0中使用如下方法可行，使用动态组件的方式

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view v-slot="{ Component }">
      <keep-alive include="Home">
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
  </div>
</template>