vue3设置页面缓存，详情页面跳转回来至之前的滚动条位置

实现页面跳转到详情再跳转回来时，页面缓存，可使用keep-alive组件，具体实现代码如下：

App.vue文件

<template>
  <div class="app-page">
    <!-- 路由出口 -->
    <router-view v-slot="{ Component }">
      <keep-alive
        :include="[
          'Monitor',
          'Mycollection',
          'Mywarning',
          userStore.cacheWarningPage ? 'Warningdata' : '',
        ]"
      >
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

在App.vue添加keep-alive，其中include数组中包含需要缓存的组件的name名称，注意是组件的name名称，不是路由router的name

Mywarning.vue文件

<template>
  <!-- 数据监控-我的预警页面 -->
  <div class="content" ref="contentRef">
    <div v-for="(item, index) in contentList" :key="index">
       <span @click="goToDetail(item.keywords)">
       	<el-icon><HelpFilled /></el-icon>
       	详情
       </span>
  	</div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineOptions, onActivated } from "vue";
import { getMyWarning } from "../../../service/monitor";
import { HelpFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useUserStore } from "../../../stores";
const userStore = useUserStore();
const router = useRouter();

defineOptions({
  name: "Mywarning",
});
const contentRef = ref(); // 定义scroll的ref
const scrollTopVal = ref(0); // 定义跳转前的scrollTop值

onActivated(() => {
  contentRef.value.scrollTop = scrollTopVal.value; // 将存储的scrollTop值赋给scroll
});

// 内容区域部分
const contentList = ref([]);
// 获取我的预警页面信息列表
const getList = async () => {
  const data = { uid: userStore.userInfo.uid };
  try {
    const res = await getMyWarning(data);
    if (res.code == 200) {
      contentList.value = res.data;
    } else {
      contentList.value = [];
    }
  } catch (err) {
    console.log("err", err);
  }
};
onMounted(() => {
  getList();
});
// 详情跳转按钮
const goToDetail = (keywords) => {
  scrollTopVal.value = contentRef.value.scrollTop; // 将此时的scrollTop值保存下来
  router.push({
    path: "/home/monitor/warningdata",
    query: { k: keywords },
  });
};
</script>