当前位置：首页 > VUE

vue实现组件切换

2026-03-29 11:11:16VUE

动态组件切换

使用Vue的<component>标签配合is属性实现动态组件切换。在模板中定义占位符，通过绑定is属性值决定当前渲染的组件。

<template>
  <component :is="currentComponent"></component>
  <button @click="toggleComponent">切换组件</button>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' 
        ? 'ComponentB' 
        : 'ComponentA'
    }
  }
}
</script>

条件渲染切换

通过v-if和v-else指令控制组件的显示与隐藏。适合需要在切换时保留组件状态的场景。

vue实现组件切换

<template>
  <ComponentA v-if="showComponentA"/>
  <ComponentB v-else/>
  <button @click="showComponentA = !showComponentA">切换组件</button>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

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

路由切换组件

通过Vue Router实现基于URL路径的组件切换。适合需要浏览器历史记录和深层链接的场景。

vue实现组件切换

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

<!-- App.vue -->
<template>
  <router-view></router-view>
  <router-link to="/a">显示A</router-link>
  <router-link to="/b">显示B</router-link>
</template>

状态管理切换

使用Pinia或Vuex管理当前显示组件的状态，实现跨组件切换。

// stores/componentStore.js
import { defineStore } from 'pinia'

export const useComponentStore = defineStore('component', {
  state: () => ({
    current: 'ComponentA'
  }),
  actions: {
    toggle() {
      this.current = this.current === 'ComponentA' 
        ? 'ComponentB' 
        : 'ComponentA'
    }
  }
})

<template>
  <component :is="store.current"></component>
  <button @click="store.toggle()">切换组件</button>
</template>

<script setup>
import { useComponentStore } from './stores/componentStore'
const store = useComponentStore()
</script>

过渡动画效果

为组件切换添加过渡动画效果，提升用户体验。

<template>
  <transition name="fade" mode="out-in">
    <component :is="currentComponent"></component>
  </transition>
</template>

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

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>