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

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;