<template>
  <!-- <router-view/> -->
  <div>
    <button v-for="i,index in data.tabs"
    :key="index" @click="currentIndex(i)"
    :class="{ active: data.currentTab === i}">{{i}}</button>

    <component :is="dom[data.currentTab]"></component>
    <!-- <template v-if="data.currentTab==='home'">
      <home></home>
    </template>
    <template v-else-if="data.currentTab==='about'">
      <about></about>
    </template>
    <template v-else="data.currentTab==='capage'">
      <capage></capage>
    </template> -->
  </div>
</template>

<script setup>
import {reactive,shallowReactive} from 'vue'
import about from './pages/about.vue';
import home from './pages/home.vue';
import capage from './pages/capage.vue';

const data=reactive({
  tabs:['home','capage','about'],
  currentTab:'home',
})
const dom=shallowReactive({
  home,about,capage
})
function currentIndex(i){
  this.data.currentTab=i
  
}
</script>

<style lang="scss">
.active{
  color: aquamarine;
}
</style>

··