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 实现页面级组件切换，需先安装路由库。

1. 安装路由：

   npm install vue-router

2. 配置路由文件（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');

1. 在模板中使用 <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 中的组件切换需求，根据场景选择动态组件或路由方案。