修改：使用动态组件而非路由跳转

src/views/im/Conversation/index.vue

@@ -1,28 +1,28 @@
 <script setup lang="ts">
-/* 搜索框组件 */
+import { ref, defineAsyncComponent } from 'vue'
 import { SearchInput } from '@/components/Im/SearchInput'
-/* 欢迎页 */
-import { Welcome } from '@/components/Im/Welcome'
 import ConversationList from '../Conversation/components/ConversationList.vue'
-import router from '@/router'
+import { Welcome } from '@/components/Im/Welcome'
 
-//路由跳转-系统通知
+// 异步加载可能的对话框内容组件
+const InformDetailsComponent = defineAsyncComponent(
+  () => import('@/views/im/InformDetails/index.vue')
+)
+const MessageComponent = defineAsyncComponent(() => import('@/views/im/Message/index.vue'))
+
+const currentComponent = ref(Welcome) // 默认加载欢迎页组件
+
+// 更改为使用动态组件切换而非路由跳转
 const toInformDetails = () => {
-  router.push('/im/conversation/informDetails')
+  currentComponent.value = InformDetailsComponent // 加载系统通知组件
 }
 
-//路由跳转-对应好友会话
 const toChatMessage = (id, chatType) => {
   console.log('>>>>>>>id', id)
-  router.push({
-    path: '/im/conversation/message',
-    query: {
-      id,
-      chatType
-    }
-  })
+  currentComponent.value = MessageComponent // 加载消息组件
 }
 </script>
+
 <template>
   <el-container style="height: 100%">
     <el-aside class="chat_conversation_box">
@@ -33,8 +33,7 @@ const toChatMessage = (id, chatType) => {
       </div>
     </el-aside>
     <el-main class="chat_conversation_main_box">
-      <router-view />
-      <Welcome />
+      <component :is="currentComponent" />
     </el-main>
   </el-container>
 </template>