vue实现模板切换
动态组件切换
使用Vue的<component>标签结合is属性实现动态组件切换。在模板中通过v-bind: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的<router-view>实现基于路由的模板切换，适合多页面应用场景。需要预先配置路由表。
// router.js
import { createRouter, createWebHistory } from 'vue-router'
import ComponentA from './ComponentA.vue'
import ComponentB from './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-view></router-view>
<router-link to="/a">显示A</router-link>
<router-link to="/b">显示B</router-link>
</template>过渡动画效果
为模板切换添加过渡效果，使用Vue的<transition>组件包裹动态组件或条件渲染内容。
<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>状态保持优化
使用<keep-alive>包裹动态组件，避免组件切换时状态丢失。适合需要保持组件状态的场景。
<template>
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
</template>
