Vue3不使用Router实现无URL变更的组件切换优化方案咨询

核心实现思路 #

• 用响应式变量追踪当前要渲染的组件，结合defineAsyncComponent实现按需加载
• 统一通过Suspense组件处理异步组件的加载状态，避免冗余逻辑
• 菜单配置与组件加载逻辑解耦，便于后续扩展
• 初始化时自动加载默认首页组件

重构后的完整代码 #

1. index.html（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

2. main.js（无需修改） #

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import './style.css'

const app = createApp(App)
app.use(store)
app.mount('#app')

3. App.vue（核心重构） #

<template>
  <div class="app-container">
    <!-- 导航按钮区 -->
    <div class="nav-buttons">
      <h1>Hello world</h1>
      <button
        v-for="menu in menus"
        :key="menu.name"
        @click="switchComponent(menu.url)"
        :class="{ active: currentComponentKey === menu.url }"
      >
        {{ menu.name }}
      </button>
    </div>

    <!-- 动态组件渲染区 -->
    <Suspense>
      <template #default>
        <component :is="currentComponent" />
      </template>
      <template #fallback>
        <div class="loading">加载中...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref, markRaw } from 'vue'

// 菜单配置：统一管理组件名称与对应路径
const menus = [
  { name: 'Home', url: 'home' },
  { name: 'About', url: 'about' },
  { name: 'Contact', url: 'contact' }
]

// 响应式变量：当前激活的组件标识（用于按钮高亮）
const currentComponentKey = ref(menus[0].url)
// 响应式变量：当前要渲染的异步组件
const currentComponent = ref(null)

// 初始化加载首页组件
const loadComponent = (componentUrl) => {
  currentComponent.value = markRaw(
    defineAsyncComponent(() => import(`./components/${componentUrl}/index.vue`))
  )
}
loadComponent(menus[0].url)

// 组件切换函数
const switchComponent = (componentUrl) => {
  currentComponentKey.value = componentUrl
  loadComponent(componentUrl)
}
</script>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.nav-buttons {
  margin-bottom: 30px;
}

.nav-buttons button {
  margin-right: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

.nav-buttons button.active {
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}

.loading {
  padding: 40px;
  text-align: center;
  font-size: 18px;
  color: #666;
}
</style>

4. 页面组件（示例：home/index.vue，about/contact同理） #

<template>
  <h2>Home</h2>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style scoped>
.card {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}
</style>

关键优化点说明 #

• 移除冗余逻辑：删除原代码中未定义的isLoggedIn和冗余的showIt变量，统一用Suspense处理加载状态
• 菜单动态渲染：通过v-for循环生成导航按钮，避免硬编码，后续新增菜单只需修改配置数组
• 组件切换逻辑统一：switchComponent函数处理所有按钮的切换逻辑，确保每个按钮点击都能正确加载对应组件
• 响应式状态管理：用currentComponentKey追踪当前激活的组件，实现按钮高亮效果，提升用户体验
• 组件标记为Raw：使用markRaw避免异步组件被Vue的响应式系统追踪，提升性能

内容的提问来源于stack exchange，提问作者Ahmad Ebrahimi