vue实现切换组件

Vue 实现组件切换的方法

动态组件 <component :is>

通过 Vue 的 is 属性动态绑定组件名，配合 v-if 或 v-show 实现切换：

<template>
  <component :is="currentComponent" />
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

路由切换 (Vue Router)

配置路由表实现页面级组件切换：

// router.js
const routes = [
  { path: '/a', component: ComponentA },
  { path: '/b', component: ComponentB }
]

通过 <router-view> 显示当前路由组件：

<router-view></router-view>

条件渲染

使用 v-if/v-else 或 v-show 控制组件显示：

<ComponentA v-if="showComponentA" />
<ComponentB v-else />

状态管理 (Vuex)

通过全局状态管理当前显示组件：

// store.js
state: {
  currentComponent: 'ComponentA'
}

组件中通过计算属性获取状态：

computed: {
  currentComponent() {
    return this.$store.state.currentComponent
  }
}

过渡动画

为组件切换添加过渡效果：

<transition name="fade">
  <component :is="currentComponent" />
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

注意事项

• 动态组件切换时，默认会销毁旧组件，使用 <keep-alive> 可缓存组件状态
• 路由切换适合页面级组件，动态组件适合局部视图切换
• 性能敏感场景优先使用 v-show 避免重复渲染