调试

src/App.vue

@@ -1,13 +1,10 @@
 <template>
   <router-view v-slot="{ Component }">
-<!--    <transition :name="transitionName">-->
-<!--      <keep-alive>-->
-<!--        <component :is="Component"/>-->
-<!--      </keep-alive>-->
-<!--    </transition>-->
-    <keep-alive>
-      <component :is="Component"/>
-    </keep-alive>
+    <transition :name="transitionName">
+      <keep-alive exclude="AllMessage">
+        <component :is="Component"/>
+      </keep-alive>
+    </transition>
   </router-view>
 </template>
 
@@ -36,6 +33,7 @@ export default {
   // watch $route 决定使用哪种过渡
   watch: {
     '$route'(to, from) {
+      console.log(to)
       this.$store.commit('setMaskDialog', {state: false, mode: this.maskDialogMode})
 
       //footer下面的5个按钮，对跳不要用动画

src/pages/message/AllMessage.vue

@@ -125,7 +125,7 @@ import resource from "../../assets/data/resource.js";
 
 
 export default {
-  name: "Fans",
+  name: "AllMessage",
   components: {
     Scroll,
     People,

src/pages/message/Message.vue

@@ -480,12 +480,6 @@ export default {
       // this.isShowRecommend = true
     }, 1000)
   },
-  activated() {
-    console.log('activated')
-  },
-  deactivated() {
-    console.log('deactivated')
-  },
   methods: {
     async loadRecommendData() {
       if (this.loading) return

src/pages/message/chat/Chat.vue

@@ -14,7 +14,7 @@
       </div>
       <div class="message-wrapper" ref="msgWrapper" :class="isExpand ? 'expand' : ''">
         <ChatMessage @itemClick="clickItem" v-longpress="showTooltip" :message="item"
-                     v-for="item in messages"></ChatMessage>
+                     v-for="(item,index) in messages" :key="item"></ChatMessage>
       </div>
       <div class="footer" :class="isTyping ? 'typing' : ''">
         <div class="toolbar" v-if="!recording">
@@ -32,7 +32,8 @@
             <img @click="recording = true;showOption = false" src="../../../assets/img/icon/message/voice-black.png"
                  alt="">
             <img src="../../../assets/img/icon/message/emoji-black.png" alt="">
-            <img v-if="showOption" @click="showOption = !showOption" src="../../../assets/img/icon/message/close-black.png"
+            <img v-if="showOption" @click="showOption = !showOption"
+                 src="../../../assets/img/icon/message/close-black.png"
                  alt="">
             <img v-else @click="showOption = !showOption" src="../../../assets/img/icon/message/add-black.png" alt="">
           </template>
@@ -470,12 +471,21 @@ export default {
   created() {
   },
   mounted() {
-    nextTick(() => {
-      let wrapper = this.$refs.msgWrapper
-      wrapper.scrollTo({top: wrapper.scrollHeight - wrapper.clientHeight})
-    })
+
+  },
+  activated() {
+    this.scrollBottom()
   },
   methods: {
+    scrollBottom() {
+      nextTick(() => {
+        let wrapper = this.$refs.msgWrapper
+        console.log('wrapper.clientHeight', wrapper.clientHeight)
+        console.log('wrapper.scrollHeight', wrapper.scrollHeight)
+        wrapper.scrollTo({top: wrapper.scrollHeight - wrapper.clientHeight})
+      })
+
+    },
     openRedPacket() {
       this.opening = true
       setTimeout(() => {
@@ -542,11 +552,9 @@ export default {
   font-size: 1.4rem;
 
   .chat-content {
-
     .header {
       z-index: 2;
       background: @main-bg;
-      position: fixed;
       width: 100%;
       box-sizing: border-box;
       height: @header-height;
@@ -582,7 +590,6 @@ export default {
     .message-wrapper {
       height: calc(100vh - 12.5rem);
       overflow: auto;
-      padding-top: 6rem;
 
       &.expand {
         height: calc(100vh - (12.5rem + 30vh));

src/pages/test/TestKeepAlive.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="Test">
+    <ul>
+      <li v-for="item in list" @click="go">{{ item }} -- Test1</li>
+    </ul>
+    <button @click="$router.push('TestKeepAlivePage1')">go2</button>
+  </div>
+</template>
+<script>
+export default {
+  name: "Test",
+  components: {},
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {
+      list: 0
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    setTimeout(() => {
+      this.list = 50
+    }, 1000)
+  },
+  methods: {
+    go(){
+      // this.$router.push('TestKeepAlivePage1')
+      this.$router.push('/message/all')
+    }
+  }
+}
+</script>
+<style lang="less">
+#Test {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: white;
+  font-size: 1.6rem;
+  overflow: auto;
+
+  li {
+    padding: 1rem;
+  }
+}
+</style>

src/pages/test/TestKeepAlivePage1.vue

@@ -0,0 +1,41 @@
+<template>
+  <div id="Test2">
+    <ul>
+      <li v-for="item in list" >{{ item }} -- Test2</li>
+    </ul>
+    <button @click="$back()">返回</button>
+  </div>
+</template>
+<script>
+export default {
+  name: "Test2",
+  components: {},
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {
+      list: 0
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    setTimeout(()=>{
+      this.list = 50
+    },1000)
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less">
+#Test2 {
+  color: white;
+  font-size: 1.6rem;
+
+  li {
+    padding: 1rem;
+  }
+}
+</style>

src/router/index.js

@@ -68,8 +68,10 @@ import TaskNotice from "../pages/message/notice/TaskNotice";
 import LiveNotice from "../pages/message/notice/LiveNotice";
 import MoneyNotice from "../pages/message/notice/MoneyNotice";
 import MoreSearch from "../pages/message/MoreSearch";
-import Test6 from "../pages/test/Test6";
+import TestVue3 from "../pages/test/TestVue3.vue";
 import RedPacketDetail from "../pages/message/RedPacketDetail";
+import TestKeepAlive from "../pages/test/TestKeepAlive";
+import TestKeepAlivePage1 from "../pages/test/TestKeepAlivePage1";
 
 const routes = [
   // {path: '', component: Music},
@@ -80,7 +82,9 @@ const routes = [
   {path: '/test3', component: Test3},
   {path: '/test4', component: Test4},
   {path: '/test5', component: Test5},
-  {path: '/test6', component: Test6},
+  {path: '/TestVue3', component: TestVue3},
+  {path: '/TestKeepAlive', component: TestKeepAlive},
+  {path: '/TestKeepAlivePage1', component: TestKeepAlivePage1},
   {path: '/home', component: Index},
   {path: '/home/submit-report', component: SubmitReport},
   {path: '/home/music', component: Music},
@@ -94,22 +98,23 @@ const routes = [
   {path: '/publish', component: Publish},
 
 
-  {path: '/message', component: Message},
-  {path: '/message/more-search', component: MoreSearch},
-  {path: '/message/share-to-friend', component: Share2Friend},
-  {path: '/message/joined-group-chat', component: JoinedGroupChat},
-  {path: '/message/fans', component: Fans},
-  {path: '/message/all', component: AllMessage},
-  {path: '/message/visitors', component: Visitors},
-  {path: '/message/douyin-helper', component: DouyinHelper},
-  {path: '/message/system-notice', component: SystemNotice},
-  {path: '/message/task-notice', component: TaskNotice},
-  {path: '/message/live-notice', component: LiveNotice},
-  {path: '/message/money-notice', component: MoneyNotice},
-  {path: '/message/notice-setting', component: NoticeSetting},
-  {path: '/message/chat', component: Chat},
-  {path: '/message/chat/detail', component: ChatDetail},
-  {path: '/message/chat/red-packet-detail', component: RedPacketDetail},
+  {path: '/message', component: Message, meta: {keepAlive: true,}},
+  {path: '/message/more-search', component: MoreSearch, meta: {keepAlive: true,}},
+  {path: '/message/share-to-friend', component: Share2Friend, meta: {keepAlive: true,}},
+  {path: '/message/joined-group-chat', component: JoinedGroupChat, meta: {keepAlive: true,}},
+  {path: '/message/fans', component: Fans, meta: {keepAlive: true,}},
+  {path: '/message/all', component: AllMessage, meta: {keepAlive: true,}},
+  {path: '/message/visitors', component: Visitors, meta: {keepAlive: true,}},
+  {path: '/message/douyin-helper', component: DouyinHelper, meta: {keepAlive: true,}},
+  {path: '/message/system-notice', component: SystemNotice, meta: {keepAlive: true,}},
+  {path: '/message/task-notice', component: TaskNotice, meta: {keepAlive: true,}},
+  {path: '/message/live-notice', component: LiveNotice, meta: {keepAlive: true,}},
+  {path: '/message/money-notice', component: MoneyNotice, meta: {keepAlive: true,}},
+  {path: '/message/notice-setting', component: NoticeSetting, meta: {keepAlive: true,}},
+
+  {path: '/message/chat', component: Chat, meta: {keepAlive: false,}},
+  {path: '/message/chat/detail', component: ChatDetail, meta: {keepAlive: true,}},
+  {path: '/message/chat/red-packet-detail', component: RedPacketDetail, meta: {keepAlive: true,}},
 
 
   {path: '/people/find-acquaintance', component: FindAcquaintance},
@@ -156,5 +161,13 @@ const routes = [
 
 export default VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
-  routes, // `routes: routes` 的缩写
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    // console.log('savedPosition', savedPosition)
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return {top: 0}
+    }
+  },
 })

src/utils/global-methods.jsx

@@ -158,7 +158,8 @@ export default {
     this.$notice('未实现')
   },
   $back() {
-    window.history.back()
+    this.$router.back()
+    // window.history.back()
   },
   $stopPropagation(e) {
     // e.stopImmediatePropagation()