Nuxt（Vue）实现tab页的切换：component方式

1、目标

实现文章和草稿箱的切换

2、具体实现

1、准备两个tab页

articleTab.vue

<template>
    <div>Tab One Content</div>
  </template>

draftBoxTab.vue

<template>
    <div>Tab Two Content</div>
  </template>

2、主页面

（1）引入刚才的两个页面

<script>
import articleTab from '@/components/creator/articleTab.vue';
import draftBoxTab from '@/components/creator/draftBoxTab.vue';
</script>

（2）setup

  setup() {
    const tabs = [
      { name: 'articleTab', label: '文章', component: articleTab },
      { name: 'draftBoxTab', label: '草稿箱', component: draftBoxTab }
    ]
    const activeTab = ref(tabs[0].name) // 默认显示第一个tab
    const currentComponent = computed(() => {
      const tab = tabs.find(t => t.name === activeTab.value)
      return tab ? tab.component : null
    })

    return {
      tabs,
      activeTab,
      currentComponent,
    }
  }

（3）tab标签

遍历读取tab数组中的数据进行tab的显示

<div
	v-for="tab in tabs"
	:key="tab.name"
	@click="activeTab = tab.name"
	:class="{ 'nav-link-tab-active': activeTab === tab.name }"
	class="nav-link-tab nav-link-tab-left"
  >
	<div class="item-title">
	  <span class="nav-link-tab-text">{{ tab.label }}</span>
	</div>
  </div>

（4）控制tab的切换。主要语句是<component :is="currentComponent"/>

  <div
	  v-for="tab in tabs"
	  :key="tab.name"
	  v-show="activeTab === tab.name"
	  class="tab-content"
	>
	  <component :is="currentComponent"/>
	</div>