一文说清如何使用keepalive实现页面缓存-（已上线）_<script setup> keep-alive页面缓存-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38680881/article/details/128040779

本文详细讲解如何利用Keepalive实现页面缓存，确保前进刷新后退不刷新，并能回到之前的位置。通过在app.vue、router、store及组件中设置关键处理，结合beforeRouteEnter路由守卫和scrollBehavior，确保前进后退的正确行为，同时要求组件名与router名称匹配，以及在meta中添加keepalive属性。

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

需求场景：前进刷新后退不刷新，且后退返回到跳转前的位置，使用keepalive可以完美实现这个需求。

前置知识

keepalive官方介绍，可查看链接补充基础知识, 看完文档我们基本可以知道，第一次进入页面渲染时会走created->activated, 回退时走activated不再走created。因此我的操作是：

前进时数据处理放在created, 后退时的数据处理放在activated；
又因为前进后退都走了activated函数，所以在beforeRouteEnter路由守卫的时候加一个标记（isBack）来判断是否从其他页面回退的；
后退返回到跳转前的位置用路由参数中的 scrollBehavior。

实现过程

在app.vue中的处理，

tip: 需要缓存的页面的组件的name和router的name要一致，组件和router配置都要写上

<template>
  <div id="app">
    <keep-alive :include="keepAlive">
      <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 {
  data() {
    return {};
  },
  computed: {
    keepAlive() {
      return this.$store.getters.keepAlive; //需要缓存的页面Name，
    },
  },
  created() 
    window.addEventListener('beforeunload', () => {
      this.$store.commit('periodMenu/SET_KEEP_ALIVE', this.$route.name); // 监听刷新默认缓存当前组件
    });
  },
};
</script>
<style lang="scss"></style>

在router中的处理

需要缓存的页面在mete中加上keepalive


  {
    path: "/***",
    name: "AAA",
    component: () => import("@/***"),
    meta: {
      title: "****",
      keepAlive: true,
    },
  },

scrollBehavior中处理

const router = new Router({
   
  routes: [
    {
   
      path: "/",
      red