当前位置：首页 > VUE

vue实现多模板切换

2026-02-24 23:48:54VUE

Vue 实现多模板切换的方法

在 Vue 中实现多模板切换可以通过动态组件、条件渲染或路由等方式实现。以下是几种常见的实现方法：

动态组件实现

使用 Vue 的 <component> 动态组件，通过 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>

条件渲染实现

通过 v-if 或 v-show 控制不同模板的显示与隐藏：

vue实现多模板切换

<template>
  <div>
    <button @click="showA = true; showB = false">显示A</button>
    <button @click="showA = false; showB = true">显示B</button>
    <ComponentA v-if="showA" />
    <ComponentB v-if="showB" />
  </div>
</template>

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

export default {
  data() {
    return {
      showA: true,
      showB: false
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

路由实现

通过 Vue Router 实现不同路由对应不同模板：

// 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;

在组件中通过 <router-link> 或编程式导航切换：

vue实现多模板切换

<template>
  <div>
    <router-link to="/a">显示A</router-link>
    <router-link to="/b">显示B</router-link>
    <router-view></router-view>
  </div>
</template>

状态管理实现

结合 Vuex 或 Pinia 管理当前显示的模板状态：

// store.js (Pinia)
import { defineStore } from 'pinia';

export const useTemplateStore = defineStore('template', {
  state: () => ({
    currentTemplate: 'ComponentA'
  }),
  actions: {
    setTemplate(template) {
      this.currentTemplate = template;
    }
  }
});

在组件中使用：

<template>
  <div>
    <button @click="store.setTemplate('ComponentA')">显示A</button>
    <button @click="store.setTemplate('ComponentB')">显示B</button>
    <component :is="store.currentTemplate"></component>
  </div>
</template>

<script setup>
import { useTemplateStore } from './store';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const store = useTemplateStore();
</script>