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

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>

src/views/im/Message/components/inputBox/index.scss

@@ -55,7 +55,7 @@
 }
 
 /* loading svg大小调整 */
-::v-deep .circular {
+:deep(.circular) {
     margin-top: 8px;
     width: 25px;
     height: 25px;

src/views/im/Message/index.scss

@@ -111,7 +111,7 @@
     border-radius: 0 0 3px 0;
 }
 
-::v-deep .el-drawer {
+:deep(.el-drawer) {
     margin-top: 60px;
     width: 150px;
     height: calc(100% - 60px);

src/views/im/NavBar/index.vue

@@ -250,36 +250,36 @@ watch(
 }
 
 .components {
-  ::v-deep .edit_userinfo_diglog {
+  :deep(.edit_userinfo_diglog) {
     border-radius: 4px;
     overflow: hidden;
   }
 
-  ::v-deep .setting_func_diglog > .el-dialog__body {
+  .setting_func_diglog :deep(.el-dialog__body) {
     padding: 28px 24px 24px 24px;
   }
 
-  ::v-deep .setting_func_diglog > .el-dialog__header {
+  .setting_func_diglog :deep(.el-dialog__header) {
     background: #f2f2f2;
     margin: 0;
   }
 
-  ::v-deep .edit_userinfo_diglog > .el-dialog__header {
+  .edit_userinfo_diglog :deep(.el-dialog__header) {
     padding: 0;
     margin-right: 0;
   }
 
-  ::v-deep .edit_userinfo_diglog > .el-dialog__body {
+  .edit_userinfo_diglog :deep(.el-dialog__body) {
     padding: 0;
     border-radius: 4px;
   }
 
-  ::v-deep .login_diglog > .el-dialog__header {
+  .login_diglog :deep(.el-dialog__header) {
     background: #f2f2f2;
     margin: 0;
   }
 
-  ::v-deep .personal_setting_card > .el-dialog__header {
+  .personal_setting_card :deep(.el-dialog__header) {
     background: #f2f2f2;
     margin: 0;
   }

src/views/im/index.vue

@@ -1,8 +1,17 @@
 <script lang="ts" setup>
+import { ref, defineAsyncComponent } from 'vue'
 import NavBar from './NavBar/index.vue'
 
+// 定义异步加载的组件
+const ConversationComponent = defineAsyncComponent(
+  () => import('@/views/im/Conversation/index.vue')
+)
+
+const currentComponent = ref(ConversationComponent) // 默认加载对话组件
+
 defineOptions({ name: 'IM' })
 </script>
+
 <template>
   <div class="app-container">
     <el-container class="chat_container">
@@ -10,11 +19,12 @@ defineOptions({ name: 'IM' })
         <NavBar />
       </el-aside>
       <el-main class="chat_main_box">
-        <router-view />
+        <component :is="currentComponent" />
       </el-main>
     </el-container>
   </div>
 </template>
+
 <style lang="scss" scoped>
 .app-container {
   position: fixed;