vue3 keep-alive 实现列表进详情保存滚动条状态

搭配 pinia 状态管理 onBeforeRouteLeave 路由守卫

include 包含的组件名称是 name 值 默认值文件名
vue3 如何设置组件 name 属性

import { defineStore, createPinia } from "pinia";
const id = "@@common";
const initialState = {
  keepAlive: [], // 保存需要缓存的组件
};
export const useCommonStore = defineStore(id, {
  state: () => ({ ...initialState }),
  getters: {},
  actions: {
    setKeepAlive(value) {
      this.keepAlive = value;
    },
  },
  persist: {
    enabled: true,
  },
});

app.vue

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="keepAlive">
      <component :is="Component" :key="$route.path" />
    </keep-alive>
  </router-view>
</template>
<script setup>
import { useCommonStore } from "@/store/common";
import { storeToRefs } from "pinia";
const store = useCommonStore();
const { keepAlive } = storeToRefs(store);
</script>

根据自己的逻辑适当修改

A.vue

<script setup>
	onBeforeRouteLeave((to) => {
	  store.setKeepAlive([]);
	});
</script>

B.vue

onBeforeRouteLeave((to) => {
	if(to.path === 'C'){
		store.setKeepAlive(["B"]);
	}
});