列表页进详情页返回缓存,去其他页面刷新(beforeRouteLeave)

列表页进详情页返回缓存

在app.vue页面

复制代码
<transition name="fade-transform" mode="out-in">
      <keep-alive :include="/-keep$/" :max="1"> // max表示只缓存一个页面
        <router-view :key="key" />
      </keep-alive>
    </transition>
export default {
  name: "AppMain", // 每个缓存的页面要写name
  computed: {
    key() {
      return this.$route.path;
    }
  }
};
复制代码

列表页

export default {
    name: "列表页名字-keep",
    activated() {
       this.getLogList(); // 列表页数据
    },      
}    

如果去其他页面缓存为清掉,用下面方法

复制代码
beforeRouteLeave(to, from, next) {
    // console.log('to', to)
    // console.log('from', from)
    if (to.path == "详情页" && from.path == "列表页") {
      next();
      return;
    } else {
      this.restFrom() // 清空筛选区域
      next();
    }
  },
复制代码

列表页进详情页返回缓存也可用这个方法:https://www.jianshu.com/p/a37684fa55b7 (参照前两个图片即可,后面的我感觉写的有问题)

posted @   挽你手  阅读(300)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示