keep-alive清除缓存

最新推荐文章于 2024-03-09 22:45:06 发布

Jyisunny_Cao

最新推荐文章于 2024-03-09 22:45:06 发布

阅读量4.2k

点赞数 1

分类专栏： Vue 文章标签：前端

本文链接：https://blog.csdn.net/huachen_shan/article/details/125541945

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在Vue开发中，keep-alive组件用于实现页面或组件的缓存，解决因页面跳转导致的数据丢失问题。例如，从A-B-C再返回B时，若不使用keep-alive，B的参数可能错误。通过在路由元信息(meta)中设置keepAlive为true，可以将B组件缓存。当从B返回A时，若需要清除缓存并刷新A页面，可以在路由监听中判断并使用$router.go(0)强制刷新。

摘要由CSDN通过智能技术生成

1. keep-alive缓存组件的作用

使用vue开发时：有ABC页面，A跳转B，B跳转C，C返回跳转B，B返回跳转A

但是：可能会出下这个问题：从A-B-C正常，但当从B返回A时，会报错，这是因为从B返回A时，传递的参数并不是从A到B的参数

所以：需要将B组件或页面缓存起来，就可以解决这个问题，缓存可以用vue 中的keep-alive标签，使用方法如下：

加上判断条件，如果keepAlive为true，那么就缓存该组件，也就是用keep-alive包裹它
如果为false，那么就不包裹

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

通过设置keepAlive的true或false来决定该组件是否缓存

const routes = [
  {
    path: "/",
    name: "A",
    component: () => import("@/views"),
    meta: {
      keepAlive: false,
    },
  },
  {
    path: "/B",
    name: "B",
    component: () => import("@/views/B"),
    meta: {
      keepAlive: true,
    },
  },
]

2. keep-alive清除缓存组件的作用

B跳转A页面是，直接清除缓存，则让A页面强制刷新

监听路由跳转，但监听到跳往的页面是A页时，直接刷新


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

``````````````````````````````````````````````````````

watch: {
  $route(to, from) {
   if (to.name === "B" && from.name) {
     this.$router.go(0); // 刷新该页面
    }
  }
}