✨ feat(下拉加载页面): keepAlive缓存相应页面

 <template>
-  <router-view></router-view>
+  <!-- 页面缓存 -->
+  <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>
 
 <script setup>
@@ -37,6 +43,32 @@ if (!Cookies.get('default_perf')) {
 }
 </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: {
+
+  }
+}
+</script>
+
 <style lang="less">
 html,
 body {

@@ -35,7 +35,8 @@ export default [{
   name: '客户端选择书籍下视频作品',
   component: () => import('./views/client/bookDetail.vue'),
   meta: {
-    title: '书籍'
+    title: '书籍',
+    keepAlive: true
   },
   children: []
 }, {
@@ -169,7 +170,8 @@ export default [{
   name: '我的留言',
   component: () => import('./views/me/message.vue'),
   meta: {
-    title: '我的留言'
+    title: '我的留言',
+    keepAlive: true
   },
   children: []
 }, {
@@ -177,7 +179,8 @@ export default [{
   name: '@我的',
   component: () => import('./views/me/callMe.vue'),
   meta: {
-    title: '@我的'
+    title: '@我的',
+    keepAlive: true
   },
   children: []
 }, {

@@ -129,9 +129,9 @@ const sendCode = () => { // 发送验证码
       })
   }
 };
-
-const phone = ref('');
-const code = ref('');
+// TEMP:测试数据
+const phone = ref('13812345678');
+const code = ref('8888');
 const disabled = ref(true);
 // 过滤输入的数字 只能四位
 const formatter = (value) => value.substring(0, 4);

@@ -113,7 +113,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 } from 'vue'
+import { ref, reactive, onMounted, nextTick, onActivated } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import $ from 'jquery'
@@ -243,6 +243,10 @@ const uploadVideo = () => {
       console.error(err);
     })
 }
+
+onActivated(() => { // keepAlive重置后执行回调
+  onLoad()
+});
 </script>
 
 <script>

@@ -54,7 +54,7 @@
 import CommentBox from '@/components/CommentBox/index.vue'
 import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
 
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onActivated } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import _ from 'lodash'
@@ -201,9 +201,9 @@ const onClick = (item) => {
   });
 }
 
-  onMounted(() => {
-    
-  })
+onActivated(() => { // keepAlive重置后执行回调
+  onLoad()
+});
 </script>
 
 <script>

@@ -286,6 +286,12 @@ 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 {

@@ -45,7 +45,7 @@
 <script setup>
 import icon_player from '@images/bofang@2x.png'
 
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, onActivated } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import _ from 'lodash'
@@ -75,6 +75,7 @@ const onLoad = () => {
         item.c_name = arr[1]; // 评论姓名
       })
       commentList.value = _.concat(commentList.value, res.data.data);
+      commentList.value = _.uniqBy(commentList.value, 'id');
       offset.value = commentList.value.length;
       loading.value = false;
       // 数据全部加载完成
@@ -135,6 +136,10 @@ const deleteComment = (item) => { // 删除评论
       // on cancel
     });
 }
+
+onActivated(() => { // keepAlive重置后执行回调
+  onLoad()
+});
 </script>
 
 <script>