研报模块缓存问题

package.json

@@ -24,6 +24,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
+    "pinia": "^2.0.36",
     "pptxgenjs": "^3.12.0",
     "v3-color-picker-teleport": "^1.0.9",
     "vant": "^4.1.2",

src/layouts/Index.vue

@@ -1,8 +1,15 @@
 <script setup>
-import {ref} from 'vue'
+import {computed, ref} from 'vue'
 import {Base64} from 'js-base64'
 import { useRouter } from 'vue-router'
 import {useUserInfo} from '@/hooks/common'
+import {useCachedViewsStore} from '@/store/modules/cachedViews'
+
+const cachedViewsStore=useCachedViewsStore()
+
+const cachedViewsList=computed(()=>{
+    return cachedViewsStore.cachesList||[]
+})
 
 const router=useRouter()
 
@@ -63,10 +70,10 @@ function handleLoginOut(){
             </van-popover>
         </div>
         <router-view v-slot="{ Component }">
-            <keep-alive>
-                <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
+            <keep-alive :include="cachedViewsList">
+                <component :is="Component" :key="$route.fullPath"/>
             </keep-alive>
-            <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
+            <!-- <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" /> -->
         </router-view>
     </div>
 </template>

src/main.js

@@ -7,6 +7,7 @@ import './assets/styles/common.scss'
 import reportErr from '@/utils/reportErr'
 import '@vant/touch-emulator';
 import {RegisterDirective} from '@/directives/Index.js'
+import {setupStore} from '@/store'
 
 
 const app= createApp(App)
@@ -15,5 +16,6 @@ reportErr(app)//设置全局错误上报
 
 registerVant(app)
 RegisterDirective(app)
+setupStore(app)
 app.use(router)
 app.mount('#app')

src/router/index.js

@@ -1,15 +1,17 @@
-import { createRouter, createWebHistory } from "vue-router";
-import { pptRoutes } from "./ppt";
-import {pptENRoutes} from './pptEn'
-import {myETARoutes} from './myETA'
-import {reportRoutes} from './report'
-import {reportEnRoutes} from './reportEn'
 /**
  * 说明
  * 此文件为路由配置入口文件
  * 路由子模块请按模块拆分到同文件夹下其他文件中
  * meta
  */
+import { createRouter, createWebHistory } from "vue-router";
+import {useCachedViewsStore} from '@/store/modules/cachedViews'
+
+import { pptRoutes } from "./ppt";
+import {pptENRoutes} from './pptEn'
+import {myETARoutes} from './myETA'
+import {reportRoutes} from './report'
+import {reportEnRoutes} from './reportEn'
 
 const routes = [
   	{
@@ -73,34 +75,33 @@ const routes = [
 const router = createRouter({
 	history: createWebHistory(import.meta.env.VITE_APP_BASE_URL),
   	routes,
-	// scrollBehavior(to, from, savedPosition) {
-	// 	if (savedPosition && to.meta.keepAlive) {
-	// 		return savedPosition;
-	// 	} else {
-	// 		return new Promise((resolve) => {
-	// 			setTimeout(() => {
-	// 				resolve({ left: 0, top: 0 });
-	// 			}, 0);
-	// 		});
-	// 	}
-	// },
+	scrollBehavior(to, from, savedPosition) {
+		if (savedPosition && to.meta.keepAlive) {
+			return savedPosition;
+		} else {
+			return new Promise((resolve) => {
+				setTimeout(() => {
+					resolve({ left: 0, top: 0 });
+				}, 0);
+			});
+		}
+	},
 });
 
+// 设置keepalive
+function setKeeplive(to){
+	const cachedViewsStore=useCachedViewsStore()
+	if(to.meta.keepAlive){
+		cachedViewsStore.addCaches(to.name)
+	}
+}
+
 router.beforeEach((to, from, next) => {
-//   if (to.query.token) {
-//     store.commit("getToken", to.query.token);
-//     store.dispatch("getUserInfo");
-//   }
-//   if (to.meta.isRoot) {
-//     store.commit("setBreadCrumb", to);
-//   } else {
-//     if (store.state.breadCrumbList.length == 1) {
-//       store.commit("modifyBreadCrumb", to.meta.title);
-//     }
-//   }
+	setKeeplive(to)
 
 	document.title = to.meta.title;
   	next();
 });
 
+
 export default router;

src/router/report.js

@@ -13,12 +13,12 @@
         meta: { 
             title: "中文研报",
             hasBackHome:true,
-            keepAlive:false
+            keepAlive:true
         },
     },
     {
         path:"/report/detail",
-        name:"ReportDetail",
+        name:"reportDetail",
         component: () => import("@/views/report/Detail.vue"),
         meta: { 
             title: "中文研报",
@@ -53,7 +53,7 @@
         meta: { 
             title: "中文研报",
             hasBackHome:true,
-            keepAlive:false
+            keepAlive:true
         },
     },
 ]

src/router/reportEn.js

@@ -13,7 +13,7 @@
         meta: { 
             title: "英文研报",
             hasBackHome:true,
-            keepAlive:false
+            keepAlive:true
         },
     },
     {
@@ -23,7 +23,7 @@
         meta: { 
             title: "英文研报",
             hasBackHome:true,
-            keepAlive:false
+            keepAlive:true
         },
     },
     {

src/store/index.js

@@ -0,0 +1,7 @@
+import { createPinia } from 'pinia'
+
+export const store = createPinia()
+
+export function setupStore(app) {
+  app.use(store)
+}

src/store/modules/cachedViews.js

@@ -0,0 +1,33 @@
+/**
+ * 组件缓存
+ */
+import { defineStore } from "pinia";
+
+export const useCachedViewsStore=defineStore('cachedViews',{
+    state:()=>{
+        return {
+            cachesList:[]
+        }
+    },
+    actions:{
+        // 将组件加入缓存
+        addCaches(name){
+            if(!this.cachesList.includes(name)){
+                console.log('添加缓存',name);
+                this.cachesList.push(name)
+            }
+        },
+        //将组件移除缓存
+        removeCaches(name){
+            if(name===-1){
+                this.cachesList=[]
+            }else{
+                const index=this.cachesList.indexOf(name)
+                if(index!==-1){
+                    console.log('移除缓存',name);
+                    this.cachesList.splice(index,1)
+                }
+            }
+        }
+    }
+})

src/views/report/List.vue

@@ -8,6 +8,8 @@ import { showToast,showDialog,Dialog } from 'vant';
 import { useRouter } from 'vue-router';
 import { OnLongPress  } from '@vueuse/components'
 import { useWindowSize } from '@vueuse/core'
+import {useCachedViewsStore} from '@/store/modules/cachedViews'
+const cachedViewsStore=useCachedViewsStore()
 
 const { width, height } = useWindowSize()
 
@@ -158,26 +160,21 @@ function handleConfirmClassify({firstClassify,secondClassify}){
 
 // 跳转详情
 function goDetail(item){
-    let routerEl
-
     if(['day','week'].includes(item.ChapterType)){
-        routerEl=router.resolve({
+        router.push({
             path:"/report/chapter/list",
             query:{
                 id:item.Id
             }
         })
     }else{
-        routerEl=router.resolve({
+        router.push({
             path:"/report/detail",
             query:{
                 id:item.Id
             }
         })
     }
-
-    
-    window.open(routerEl.href,'_blank')
 }
 
 // 长按弹出操作
@@ -253,6 +250,12 @@ function handleConfirmStatus(){
     showMoreFilter.value=false
 }
 
+function goSearch(){
+    // 删除报告搜索页的缓存
+    cachedViewsStore.removeCaches('ReportSearch')
+    router.push('/report/search')
+}
+
 </script>
 
 <template>
@@ -264,7 +267,7 @@ function handleConfirmStatus(){
                     shape="round" 
                     readonly 
                     placeholder="请输入报告标题或作者"
-                    @click="$router.push('/report/search')"
+                    @click="goSearch"
                 />
                 <div :class="['menu-icon',showClassify?'active':'']" @click="showClassify=true">
                     <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">

src/views/report/Search.vue

@@ -1,10 +1,12 @@
-<script setup name="reportSearch">
+<script setup name="ReportSearch">
 import {ref,reactive} from 'vue'
 import apiReport from '@/api/report'
 import { showToast } from 'vant'
 import moment from 'moment'
 import { useRouter } from 'vue-router'
 
+console.log('搜索页setup');
+
 const router=useRouter()
 
 const keyword=ref('')
@@ -34,6 +36,7 @@ async function getList(){
     }
 }
 function onLoad(){
+    console.log('onload');
     listState.page++
     getList()
 }
@@ -50,25 +53,21 @@ function handleSearch(){
 }
 
 function goDetail(item){
-    let routerEl
-
     if(['day','week'].includes(item.ChapterType)){
-        routerEl=router.resolve({
+        router.push({
             path:"/report/chapter/list",
             query:{
                 id:item.Id
             }
         })
     }else{
-        routerEl=router.resolve({
+        router.push({
             path:"/report/detail",
             query:{
                 id:item.Id
             }
         })
     }
-
-    window.open(routerEl.href,'_blank')
 }
 </script>
 
@@ -83,6 +82,7 @@ function goDetail(item){
             />
         </div>
         <img v-if="listState.list.length==0&&listState.finished&&keyword" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
+        <template v-if="keyword">
         <van-list
             v-model:loading="listState.loading"
             :finished="listState.finished"
@@ -109,6 +109,7 @@ function goDetail(item){
                 </li>
             </ul>
         </van-list>
+        </template>
     </div>
 </template>
 

src/views/reportEn/List.vue

@@ -1,4 +1,4 @@
-<script setup name="ReportList">
+<script setup name="ReportEnList">
 import {nextTick, reactive,ref} from 'vue'
 import apiReportEn from '@/api/reportEn'
 import moment from 'moment'
@@ -7,6 +7,8 @@ import { showToast,showDialog,Dialog } from 'vant';
 import { useRouter } from 'vue-router';
 import { OnLongPress  } from '@vueuse/components'
 import { useWindowSize } from '@vueuse/core'
+import {useCachedViewsStore} from '@/store/modules/cachedViews'
+const cachedViewsStore=useCachedViewsStore()
 
 const { width, height } = useWindowSize()
 
@@ -133,13 +135,12 @@ function handleConfirmClassify({firstClassify,secondClassify}){
 
 // 跳转详情
 function goDetail(item){
-    let routerEl=router.resolve({
+    router.push({
         path:"/reportEn/detail",
         query:{
             id:item.Id
         }
     })
-    window.open(routerEl.href,'_blank')
 }
 
 // 长按弹出操作
@@ -215,6 +216,11 @@ function handleConfirmStatus(){
     showMoreFilter.value=false
 }
 
+function goSearch(){
+    // 删除报告搜索页的缓存
+    cachedViewsStore.removeCaches('ReportEnSearchList')
+    router.push('/reportEn/search')
+}
 </script>
 
 <template>
@@ -226,7 +232,7 @@ function handleConfirmStatus(){
                     shape="round" 
                     readonly 
                     placeholder="请输入报告标题或作者"
-                    @click="$router.push('/reportEn/search')"
+                    @click="goSearch"
                 />
                 <div :class="['menu-icon',showClassify?'active':'']" @click="showClassify=true">
                     <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">

src/views/reportEn/Search.vue

@@ -1,4 +1,4 @@
-<script setup name="reportSearch">
+<script setup name="ReportEnSearchList">
 import {ref,reactive} from 'vue'
 import apiReportEn from '@/api/reportEn'
 import { showToast } from 'vant'
@@ -50,13 +50,12 @@ function handleSearch(){
 }
 
 function goDetail(item){
-    let routerEl=router.resolve({
+    router.push({
         path:"/reportEn/detail",
         query:{
             id:item.Id
         }
     })
-    window.open(routerEl.href,'_blank')
 }
 </script>
 
@@ -71,6 +70,7 @@ function goDetail(item){
             />
         </div>
         <img v-if="listState.list.length==0&&listState.finished&&keyword" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
+        <template v-if="keyword">
         <van-list
             v-model:loading="listState.loading"
             :finished="listState.finished"
@@ -97,6 +97,7 @@ function goDetail(item){
                 </li>
             </ul>
         </van-list>
+        </template>
     </div>
 </template>
 

src/views/tabbar/Home.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { useRouter } from "vue-router";
+import {useCachedViewsStore} from '@/store/modules/cachedViews'
+const cachedViewsStore=useCachedViewsStore()
+cachedViewsStore.removeCaches(-1)
 
 const router=useRouter()