缓存

src/router/index.js

@@ -134,7 +134,7 @@ const routes=[
         component: () => import("@/views/report/List.vue"),
         meta: {
           title: "报告列表",
-          keepAlive:false,
+          keepAlive:true,
           isRoot:false,
           hasBack:true
         },
@@ -145,7 +145,7 @@ const routes=[
         component: () => import("@/views/report/specialColumn/List.vue"),
         meta: {
           title: "专栏列表",
-          keepAlive:false,
+          keepAlive:true,
           isRoot:false,
           hasBack:true
         },
@@ -156,7 +156,7 @@ const routes=[
         component: () => import("@/views/report/specialColumn/Detail.vue"),
         meta: {
           title: "专栏详情",
-          keepAlive:false,
+          keepAlive:true,
           isRoot:false,
           hasBack:true
         },

src/views/report/List.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref,onMounted, reactive} from 'vue'
+import {ref,onMounted, reactive, onActivated} from 'vue'
 import moment from 'moment';
 import { apiSubClassifyList , apiReportList } from '@/api/report'
 import Search from '@/components/Search.vue'
@@ -125,6 +125,19 @@ const handlePlayAudio=(item)=>{
     }
 }
 
+// 组件激活时
+onActivated(()=>{
+    const temClassifyId=route.query.classifyId||0
+    if(temClassifyId!=classifyId.value){
+        classifyId.value=temClassifyId
+        reportState.list=[]
+        reportState.page=1
+        reportState.finished=false
+        reportState.searchVal=''
+        getReportList()
+    }
+})
+
 </script>
 
 <template>

src/views/report/specialColumn/Detail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {reactive, ref} from 'vue'
+import {onActivated, reactive, ref} from 'vue'
 import moment from 'moment';
 import SelfList from '@/components/SelfList.vue'
 import {apiSpecialColumnDetail,apiSpecialColumnReportList,apiSpecialColumnComment} from '@/api/report'
@@ -12,9 +12,10 @@ const store=useStore()
 
 let nav=ref('专栏介绍')
 
+let classify_id_second=ref(route.query.columnId||0)
 let info=ref(null)//专栏详情
 const getSpecialColumnDetail=async ()=>{
-    const res=await apiSpecialColumnDetail({classify_id_second:Number(route.query.columnId)})
+    const res=await apiSpecialColumnDetail({classify_id_second:Number(classify_id_second.value)})
     if(res.code===200){
         info.value=res.data
         document.title=res.data.classify_name_second
@@ -26,7 +27,7 @@ getSpecialColumnDetail()
 // 客户评价
 let commentList=ref([])
 const getComment=async ()=>{
-    const res=await apiSpecialColumnComment({classify_id_second:Number(route.query.columnId)})
+    const res=await apiSpecialColumnComment({classify_id_second:Number(classify_id_second.value)})
     if(res.code===200){
         commentList.value=res.data
     }
@@ -45,7 +46,7 @@ let listState=reactive({
 const getReportList=async ()=>{
     listState.loading=true
     const res=await apiSpecialColumnReportList({
-        classify_id_second:Number(route.query.columnId||0),
+        classify_id_second:Number(classify_id_second.value),
         current_index:listState.page,
         page_size:listState.pageSize
     })
@@ -95,6 +96,20 @@ const handlePlayAudio=(item)=>{
 }
 
 
+// 组件激活时
+onActivated(()=>{
+    const temClassify_id_second=route.query.columnId
+    if(temClassify_id_second!=classify_id_second.value){
+        nav.value='专栏介绍'
+        classify_id_second.value=temClassify_id_second
+        listState.list=[]
+        listState.page=1
+        listState.finished=false
+        getSpecialColumnDetail()
+        getReportList()
+    }
+})
+
 
 </script>
 

src/views/report/specialColumn/List.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {reactive, ref} from 'vue'
+import {onActivated, reactive, ref} from 'vue'
 import SelfList from '@/components/SelfList.vue'
 import {apiReportClassify,apiSpecialColumnList} from '@/api/report'
 import { useRoute, useRouter } from 'vue-router';
@@ -57,6 +57,16 @@ const goSpecialColumnDetail=(item)=>{
         }
     })
 }
+
+
+// 组件缓存激活时
+onActivated(()=>{
+    const temClassifyId=route.query.classifyId
+    if(temClassifyId!=classifyId.value){
+        classifyId.value=Number(temClassifyId)
+        getSpecialColumnList()
+    }
+})
 </script>
 
 <template>