vue实现组件切换案例
Vue 实现组件切换案例
Vue 中实现组件切换通常可以通过动态组件 (<component :is="currentComponent">) 或路由 (vue-router) 完成。以下是两种常见方法的实现示例：
动态组件切换
通过 v-bind:is 动态绑定组件名，结合按钮点击切换组件。
<template>
<div>
<button @click="currentComponent = 'ComponentA'">切换A</button>
<button @click="currentComponent = 'ComponentB'">切换B</button>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
data() {
return {
currentComponent: 'ComponentA'
};
},
components: {
ComponentA,
ComponentB
}
};
</script>路由切换
通过 vue-router 实现页面级组件切换，需先安装路由库。
-
安装路由：
npm install vue-router -
配置路由文件（
router/index.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;
3. 在 `main.js` 中引入路由：
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');- 在模板中使用
<router-link>和<router-view>：<template> <div> <router-link to="/a">切换到A</router-link> <router-link to="/b">切换到B</router-link> <router-view></router-view> </div> </template>
过渡动画效果
为组件切换添加过渡动画，使用 Vue 的 <transition> 标签。
<template>
<div>
<button @click="toggleComponent">切换组件</button>
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>状态保持
使用 <keep-alive> 缓存非活跃组件状态，避免重复渲染。
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>通过以上方法，可以灵活实现 Vue 中的组件切换需求，根据场景选择动态组件或路由方案。
