VUE keep-alive动态缓存页面

1、App.vue

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

2、router.js

  {
    path: "/keepAliveDemo",
    name: "keepAliveDemo",
    component: () => import("@/views/test/keep-alive/index.vue"),
    meta: {
      title: "keepAlive使用示例",
      keepAlive: true,
      isRefresh: true,
    },
  },

3、keep-alive/index.vue(缓存页面)

  activated() {
    // isRefresh:表示是否需要刷新
    if (this.$route.meta.isRefresh) {
      this.list = [];
      // 手动刷新页面操作,重置表单、列表、请求.....
    }
  },

  beforeRouteLeave(to, from, next) {
    // 去详情页则将isRefresh改为false,因为从详情页返回不用刷新页面
    // 去非详情页则将isRefresh改为true,因为从其他页面进来需要刷新页面
    if (to.name == "keepAliveDetails") {
      from.meta.isRefresh = false;
    } else {
      from.meta.isRefresh = true;
    }
    next();
  },

4、需求描述:需要缓存列表页面,从列表页点击跳转至详情页,从详情页返回需要缓存之前的数据以及定位到查看详情的项,从其他页面进入列表页需要刷新。

ps:定位元素使用    document.getElementById(`定位元素id`).scrollIntoView();

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值