vue如何实现组件切换
使用动态组件 <component :is>
在 Vue 中可以通过动态组件实现组件切换。通过 :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 条件渲染
通过条件判断显示不同的组件。
<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 实现路由级组件切换
对于页面级组件切换，可以使用 Vue Router。
// router.js
import { createRouter, createWebHistory } from 'vue-router'
import ComponentA from './views/ComponentA.vue'
import ComponentB from './views/ComponentB.vue'
const routes = [
{ path: '/a', component: ComponentA },
{ path: '/b', component: ComponentB }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router<!-- App.vue -->
<template>
<router-link to="/a">显示A</router-link>
<router-link to="/b">显示B</router-link>
<router-view></router-view>
</template>使用过渡动画增强切换效果
可以为组件切换添加过渡效果。
<template>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>使用 keep-alive 缓存组件状态
在切换组件时保持组件状态不被销毁。
<template>
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
</template>每种方法适用于不同场景：简单切换可用动态组件或条件渲染，页面级切换用路由，需要动画效果加过渡，需要保持状态用 keep-alive。
