列表页进详情页返回缓存,去其他页面刷新(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 @ 2022-04-21 15:33  挽你手  阅读(290)  评论(0编辑  收藏  举报