实现history页面缓存

src/component/home/index.vue

@@ -4,18 +4,25 @@
 			<a-spin size="large" />
 		</div>
 		<div class="show">
-			<div v-show="openType === 'history'" class="function">
+			<!-- <div v-show="openType === 'history'" class="function">
 				<design :key="componentKey" ref="design"></design>
-			</div>
+			</div> -->
 			<router-view v-if="
 				(openType && openType != 'history' && !routeQuery.id) || 
 				$route.path != '/home'" 
 				@setTask="setTask"
+				v-slot="{ Component, route }"
 			>
+				<keep-alive :include="cachedRoutes">
+					<component 
+						:is="Component" 
+						:key="route.name"
+					/>
+				</keep-alive>
 			</router-view>
-			<div v-else-if="routeQuery.id" class="function">
+			<!-- <div v-else-if="routeQuery.id" class="function">
 				<design :key="componentKey" ref="design"></design>
-			</div>
+			</div> -->
 			<div v-else-if="!routeQuery.history" class="function">
 				<newPorject ref="newPorject" @newProject=newProject></newPorject>
 			</div>
@@ -33,14 +40,13 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import { useRouter,useRoute } from 'vue-router'
-import design from "./design/index.vue"
 import newPorject from "./newProject/index.vue"
 import router from '@/router';
 import {getMinioUrl, getUniversalZoomLevel} from '@/tool/util'
 import chat from "./chat/index.vue"
 export default defineComponent({
 	components:{
-		design,newPorject,chat
+		newPorject,chat
 	},
 	emits:['setTask','setNewProject'],
 	setup(props,{emit}) {
@@ -54,6 +60,7 @@ export default defineComponent({
 			selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
 			chatData:null as any,
 			dataLoad:true as any,
+			cachedRoutes:computed(()=>store.state.Workspace.cachedRoutes),//
 		})
 		let settingGetHistory:any = inject('settingGetHistory')
 		const setIsShowMark = (boolean:boolean)=>{
@@ -72,15 +79,33 @@ export default defineComponent({
 		// 		getHistory(route.query.history)
 		// 	}
 		// })
-			
+		watch(
+			() => route,
+			(newRoute) => {
+				const routeName = newRoute.name as string
+				const shouldCache = newRoute.meta?.cache === true
+				if (shouldCache && routeName && !data.cachedRoutes.includes(routeName)) {
+					if(routeName == 'toolsPage' && !route.query?.id)return
+					data.cachedRoutes.push(routeName)// 保证缓存只有一个项目
+				} else if ((!route.query?.id && shouldCache) || (!shouldCache && routeName && data.cachedRoutes.includes(routeName))) {
+				// } else if (!shouldCache && routeName && data.cachedRoutes.includes(routeName)) {
+					for (let i = data.cachedRoutes.length - 1; i >= 0; i--) {
+						if (data.cachedRoutes[i] !== routeName) {
+							data.cachedRoutes.splice(i, 1);
+						}
+					}
+				}
+			},
+			{ immediate: true, deep: true }
+		)
 		watch(() => route.query,
 			(query:any, oldQuery:any) => {
 				data.routeQuery = query
 				if(query.history)data.componentKey = query.history
-				const key = Object.keys(query)?.[0]
-				console.log(key)
+				let key = Object.keys(query)?.[0]
+				if(route.params?.id)key = 'history'
 				if(key){
-					data.openType = Object.keys(query)[0]
+					data.openType = key
 				}else{
 					data.openType = ''
 					data.dataLoad = false
@@ -90,26 +115,26 @@ export default defineComponent({
 				// 检查是否需要重新初始化
 				const currentPath = route.fullPath
 				const storedPath = store.state.Workspace.projectPath
-				const isSameProject = currentPath === storedPath && data.openType === 'history'
+				const isSameProject = currentPath === storedPath
 				
-				if(data.openType == 'history'){
+				if((data.openType == 'history' && route.params?.id) || (data.openType == 'tools' && query.id)){
 					store.commit('setProjectPath',route.fullPath)
 				}
 				
 				// 如果是同一个项目且openType为history，跳过重新初始化
-				console.log(isSameProject,data.openType)
-				if(isSameProject || (!query.history && !query.id)){
+				// if(oldQuery?.id && !query?.id)return createData()
+				const tempUrl = new URL(storedPath, window.location.origin);
+				const params2 = {
+					tools: tempUrl.searchParams.get('tools'),
+					id: tempUrl.searchParams.get('id')
+				};
+				if(isSameProject || (!route.params?.id && !query.id) || params2.id){
 					data.dataLoad = false
-					console.log(dataDom.design)
 					// dataDom.design?.init()
-					if(query.history){
-						dataDom.design.openSetData()
-					}
 					return
 				}
-				
 				nextTick(()=>{
-					if(query.history || query.id){
+					if(route.params?.id || query?.id){
 						//切换新项目需要清除首次design提示
 						sessionStorage.removeItem('firstDesign');
 
@@ -125,7 +150,7 @@ export default defineComponent({
 							store.commit("createProbject");
 							store.commit("clearAllData");
 						}
-						getHistory(query.id || query.history)
+						getHistory(query.id || route.params?.id)
 					}else{
 						data.dataLoad = false
 						createData()
@@ -201,7 +226,7 @@ export default defineComponent({
 			storeData.positionList = position
 			store.commit('setProbject',storeData)
 			// setChatData()
-			if(route.name == 'tools'){
+			if(route.name == 'toolsPage'){
 				getCollection('tools',null)	
 			}else{
 				getCollection('design',null)	
@@ -548,7 +573,8 @@ export default defineComponent({
 			}else{
 				chatModel = false
 			}
-			router.push(`home?history=${value.id}&chatMode=${chatModel}`)
+			router.push(`/home/history/${value?.id}`)
+			// router.push(`home?history=${value.id}&chatMode=${chatModel}`)
 			settingGetHistory()
 			data.chatData = value