VUE keep-alive动态缓存页面

小羊羔丢了

已于 2024-05-30 17:06:05 修改

阅读量570

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js 缓存前端

于 2024-05-30 15:55:44 首次发布

本文链接：https://blog.youkuaiyun.com/Qing_0124/article/details/139326105

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();