✨ feat(下拉列表页): keepAlive控制组件生命周期

 <template>
   <!-- 页面缓存 -->
-  <router-view v-slot="{ Component }"> 
-    <keep-alive> 
-      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"/> 
-    </keep-alive> 
-      <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive"/> 
+  <router-view v-slot="{ Component }">
+    <keep-alive>
+      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
+    </keep-alive>
+    <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
   </router-view>
 </template>
 
@@ -15,6 +15,7 @@ import axios from '@/utils/axios'
 import { useRoute, useRouter } from 'vue-router'
 import { onMounted } from 'vue'
 import { Toast } from 'vant'
+// import _ from 'lodash';
 import { mainStore } from './store';
 
 const store = mainStore();
@@ -26,46 +27,20 @@ const $router = useRouter();
  */
 if (!Cookies.get('default_perf')) {
   axios.get('/srv/?a=default_perf')
-  .then(res => {
-    if (res.data.code === 1) {
-      Cookies.set('default_perf', JSON.stringify(res.data.data));
-    } else {
-      console.warn(res);
-      Toast({
-        icon: 'close',
-        message: res.data.msg
-      });
-    }
-  })
-  .catch(err => {
-    console.error(err); 
-  });
-}
-</script>
-
-<script>
-import _ from 'lodash';
-
-export default {
-  beforeRouteEnter(to, from, next) {
-    // 如果是从下面页面返回，需要重置keepAlive状态
-    const arr = ['/me/message', '/me/callMe', '/client/bookDetail'];
-    if (_.findIndex(arr, (path) => path === from.path) !== -1) {
-      from.meta.keepAlive = false;
-    }
-    next();
-  },
-  data() {
-    return {
-
-    }
-  },
-  mounted() {
-
-  },
-  methods: {
-
-  }
+    .then(res => {
+      if (res.data.code === 1) {
+        Cookies.set('default_perf', JSON.stringify(res.data.data));
+      } else {
+        console.warn(res);
+        Toast({
+          icon: 'close',
+          message: res.data.msg
+        });
+      }
+    })
+    .catch(err => {
+      console.error(err);
+    });
 }
 </script>
 

@@ -94,7 +94,8 @@ export default {
       this.$router.push({
         path: '/client/videoDetail',
         query: {
-          prod_id: this.item.id
+          prod_id: this.item.id,
+          path: this.item.path // 特殊标识，判断入口 为keepAlive使用
         }
       });
     },
@@ -129,4 +130,4 @@ export default {
  
   }
 }
-</style>
\ No newline at end of file
+</style>

@@ -98,7 +98,8 @@ export default [{
   name: '个人首页',
   component: () => import('./views/client/personIndex.vue'),
   meta: {
-    title: '个人首页'
+    title: '个人首页',
+    keepAlive: true
   },
   children: []
 }, {

@@ -114,7 +114,7 @@ import icon_unsubscribe from '@images/icon-dingyue02@2x.png'
 import ShortcutFixed from '@/components/ShortcutFixed/index.vue'
 import tools from '@/common/tool'
 import { ref, reactive, onMounted, nextTick, onActivated } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import axios from '@/utils/axios';
 import $ from 'jquery'
 import _ from 'lodash'
@@ -244,9 +244,31 @@ const uploadVideo = () => {
     })
 }
 
-onActivated(() => { // keepAlive重置后执行回调
-  onLoad()
+/****************** keepAlive 模块 *******************/
+
+onActivated(() => { // keepAlive 重置后执行回调
 });
+
+const changeRouterKeepAlive = (path, keepAlive) => {
+  $router.options.routes.map((item) => {
+    if (item.path === path) {
+      item.meta.keepAlive = keepAlive;
+    }
+  });
+};
+
+onBeforeRouteLeave((to, from) => {
+  // 如果是从页面返回，需要重置keepAlive状态
+  // 列表页 =》 详情页
+  // TAG: keepAlive
+  if (to.path === '/client/videoDetail') {
+    changeRouterKeepAlive(from.path, true);
+  } else {
+    changeRouterKeepAlive(from.path, false);
+  }
+})
+
+/*********************************************************/
 </script>
 
 <script>

@@ -55,9 +55,10 @@
 <script setup>
 import VideoCard from '@/components/VideoCard/index.vue'
 
-import { ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref, onActivated } from 'vue'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import axios from '@/utils/axios';
+import _ from 'lodash';
 import { Toast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
@@ -71,6 +72,9 @@ axios.get('/srv/?a=perf_info', {
 })
   .then(res => {
     if (res.data.code === 1) {
+      _.each(res.data.data.prod, (item) => {
+        item.path = 'personIndex'
+      })
       userInfo.value = res.data.data;
     } else {
       console.warn(res);
@@ -111,6 +115,31 @@ const followUser = (status) => {
   })
 };
 
+/****************** keepAlive 模块 *******************/
+
+onActivated(() => { // keepAlive 重置后执行回调
+});
+
+const changeRouterKeepAlive = (path, keepAlive) => {
+  $router.options.routes.map((item) => {
+    if (item.path === path) {
+      item.meta.keepAlive = keepAlive;
+    }
+  });
+};
+
+onBeforeRouteLeave((to, from) => {
+  // 如果是从页面返回，需要重置keepAlive状态
+  // 列表页 =》 详情页
+  // TAG: keepAlive
+  if (to.path === '/client/videoDetail' && to.query.path) {
+    changeRouterKeepAlive(from.path, true);
+  } else {
+    changeRouterKeepAlive(from.path, false);
+  }
+})
+
+/*********************************************************/
 </script>
 
 <script>
@@ -200,4 +229,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

@@ -55,7 +55,7 @@ import CommentBox from '@/components/CommentBox/index.vue'
 import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
 
 import { ref, reactive, onActivated } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import axios from '@/utils/axios';
 import _ from 'lodash'
 import { Toast } from 'vant';
@@ -108,8 +108,8 @@ const onLoad = () => {
     console.error(err); 
   })
 }
-
-onLoad()
+// 立即执行一次
+onLoad();
 
 const showNotice = ref(false)
 const onClose = () => { // 关闭提示框回调
@@ -201,9 +201,31 @@ const onClick = (item) => {
   });
 }
 
-onActivated(() => { // keepAlive重置后执行回调
-  onLoad()
+/****************** keepAlive 模块 *******************/
+
+onActivated(() => { // keepAlive 重置后执行回调
 });
+
+const changeRouterKeepAlive = (path, keepAlive) => {
+  $router.options.routes.map((item) => {
+    if (item.path === path) {
+      item.meta.keepAlive = keepAlive;
+    }
+  });
+};
+
+onBeforeRouteLeave((to, from) => {
+  // 如果是从页面返回，需要重置keepAlive状态
+  // 列表页 =》 详情页
+  // TAG: keepAlive
+  if (to.path === '/client/bookDetail') {
+    changeRouterKeepAlive(from.path, true);
+  } else {
+    changeRouterKeepAlive(from.path, false);
+  }
+})
+
+/*********************************************************/
 </script>
 
 <script>

@@ -286,12 +286,6 @@ const getUnwatch = () => {
 import mixin from 'common/mixin';
 
 export default {
-  beforeRouteEnter(to, from, next) {
-    if (from.path === '/me/message' || from.path === '/me/callMe') { // 如果是从[我的留言,@me]页面返回，需要重置keepAlive状态
-      from.meta.keepAlive = false;
-    }
-    next();
-  },
   mixins: [mixin.init],
   data() {
     return {

@@ -46,7 +46,7 @@
 import icon_player from '@images/bofang@2x.png'
 
 import { ref, reactive, onMounted, onActivated } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
 import axios from '@/utils/axios';
 import _ from 'lodash'
 import { Toast, Dialog } from 'vant';
@@ -137,9 +137,31 @@ const deleteComment = (item) => { // 删除评论
     });
 }
 
-onActivated(() => { // keepAlive重置后执行回调
-  onLoad()
+/****************** keepAlive 模块 *******************/
+
+onActivated(() => { // keepAlive 重置后执行回调
 });
+
+const changeRouterKeepAlive = (path, keepAlive) => {
+  $router.options.routes.map((item) => {
+    if (item.path === path) {
+      item.meta.keepAlive = keepAlive;
+    }
+  });
+};
+
+onBeforeRouteLeave((to, from) => {
+  // 如果是从页面返回，需要重置keepAlive状态
+  // 列表页 =》 详情页
+  // TAG: keepAlive
+  if (to.path === '/client/videoDetail') {
+    changeRouterKeepAlive(from.path, true);
+  } else {
+    changeRouterKeepAlive(from.path, false);
+  }
+})
+
+/*********************************************************/
 </script>
 
 <script>