keep-alive(某一个页面我从部分路径过来，需要缓存，但从另一部分路径过来，不能缓存页面，需要刷新)（上篇）

Yetian_2000

于 2021-10-25 16:37:23 发布

阅读量335

点赞数 1

CC 4.0 BY-SA版权

分类专栏： 11 文章标签：缓存

本文链接：https://blog.youkuaiyun.com/Yetian_2000/article/details/120954876

11 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在Vue中根据路由来源动态控制keep-alive缓存的方法。通过在父组件中设置v-if和提供reload方法，以及在子组件中调用该方法，实现从特定路径进入时刷新页面数据。该方案解决了不同路径进入同一页面需不同缓存策略的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

keep-alive(某一个页面我从部分路径过来，需要缓存，但从另一部分路径过来，不能缓存页面，需要刷新)

这个问题我从网上找到一个比较好的方法解决：https://blog.youkuaiyun.com/GraffitiBoy/article/details/106812435

关键代码如下表：
父组件

//首先添加v-if,并且写个祖宗方法让其子页面调用v-if销毁创建的方法
<template>
  <div id="app">
    <keep-alive v-if="isRouterAlive">
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
    }
  }
};
</script>

子组件

//在新增页面上，调用此祖宗方法，销毁创建，就可以重新刷新新增页面数据
export default {
    inject: ["reload"],
    beforeRouteEnter(to, from, next) {
    if (from.fullPath === "/SecurityCheck") {
      next(vm => {
        vm.reload();
      });
    } 
  },
}