实现页面跳转到详情再跳转回来时，页面缓存，可使用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>