Vue多个按钮切换不同子页面

前言

在开发中难免碰到这样的页面，一个页面展示许多可以点击的按钮，点击不同按钮对应本页面的子页面切换不同的子页面。相信对于这种页面大家并不少见，而碰到这种情况的时候，都需要一个模板，节省开发时间！

先看效果

再给代码

<template>
  <div>
    <div style="width: 100%; height: 8vh;">
      <el-button-group>
        <el-button
          v-for="(page, index) in pages"
          :key="index"
          size="small"
          :class="{ 'is-active': activeIndex === index }"
          @click="changePage(index)"
          style="margin-left: 4vw;margin-top: 2vh;border-radius: 5px;"
          >
          {{ page.buttonText }}
        </el-button>
      </el-button-group>
    </div>

    <div v-for="(page, index) in pages" :key="index" v-show="activeIndex === index">
      <component :is="page.component"></component>
    </div>

  </div>
</template>



<script>

export default {
  data() {
    return {
      title: "**",
      pages: [
        { buttonText: '按钮名称', component: tqld },
        { buttonText: '按钮名称', component: fkxld },
        { buttonText: '按钮名称', component: gkqxgc },
        { buttonText: '按钮名称', component: dmqxgc },
        { buttonText: '按钮名称', component: gnssmetgc },
        { buttonText: '按钮名称', component: zdtrsfgc },
        { buttonText: '按钮名称', component: ldgc },
        // 可根据需要添加更多页面，component是引入的vue子页面
      ],
      activeIndex: 0,
    };
 },

methods: {
    changePage(index) {
      this.activeIndex = index;
    },
  }
}
</script>