vue实现切换

实现 Vue 组件切换

在 Vue 中实现切换功能通常涉及动态组件、条件渲染或路由切换。以下是几种常见方法：

动态组件切换

使用 <component :is="currentComponent"> 实现动态切换组件：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">切换A</button>
    <button @click="currentComponent = 'ComponentB'">切换B</button>
    <component :is="currentComponent"/>
  </div>
</template>

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

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

条件渲染切换

通过 v-if/v-else 控制显示内容：

<template>
  <div>
    <button @click="showA = !showA">切换内容</button>
    <div v-if="showA">内容A</div>
    <div v-else>内容B</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showA: true
    }
  }
}
</script>

路由页面切换

配置 Vue Router 实现页面级切换：

// router.js
const routes = [
  { path: '/page1', component: Page1 },
  { path: '/page2', component: Page2 }
]

<template>
  <router-link to="/page1">页面1</router-link>
  <router-link to="/page2">页面2</router-link>
  <router-view/>
</template>

过渡动画效果

为切换添加过渡效果：

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

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

状态管理切换

当需要跨组件共享切换状态时，可使用 Vuex：

// store.js
export default new Vuex.Store({
  state: {
    currentView: 'Dashboard'
  },
  mutations: {
    setView(state, view) {
      state.currentView = view
    }
  }
})

<template>
  <button @click="$store.commit('setView', 'Settings')">切换到设置</button>
</template>