Hey there! Let's walk through how to implement a multi-tab setup where each tab loads its own component on demand, keeping all tabs visible on the same page. I'll cover both React and Vue since those are the most common frameworks for this scenario.

This approach uses React's built-in lazy and Suspense to handle on-demand component loading, paired with state to track the active tab.

Step 1: Build the Tab Container Component #

Create a parent component that manages tab state and lazy-loads each tab's content:

import React, { useState, lazy, Suspense } from 'react';

// Lazy-load each tab component (only loads when needed)
const Tab1Component = lazy(() => import('./Tab1Component'));
const Tab2Component = lazy(() => import('./Tab2Component'));
const Tab3Component = lazy(() => import('./Tab3Component'));
const Tab4Component = lazy(() => import('./Tab4Component'));

const TabContainer = () => {
  const [activeTab, setActiveTab] = useState('tab1');

  // Render the active tab's component
  const renderActiveTab = () => {
    switch (activeTab) {
      case 'tab1':
        return <Tab1Component />;
      case 'tab2':
        return <Tab2Component />;
      case 'tab3':
        return <Tab3Component />;
      case 'tab4':
        return <Tab4Component />;
      default:
        return null;
    }
  };

  return (
    <div className="tab-container">
      {/* Tab Navigation Bar */}
      <div className="tab-nav">
        <button
          className={`tab-btn ${activeTab === 'tab1' ? 'active' : ''}`}
          onClick={() => setActiveTab('tab1')}
        >
          Tab 1
        </button>
        <button
          className={`tab-btn ${activeTab === 'tab2' ? 'active' : ''}`}
          onClick={() => setActiveTab('tab2')}
        >
          Tab 2
        </button>
        <button
          className={`tab-btn ${activeTab === 'tab3' ? 'active' : ''}`}
          onClick={() => setActiveTab('tab3')}
        >
          Tab 3
        </button>
        <button
          className={`tab-btn ${activeTab === 'tab4' ? 'active' : ''}`}
          onClick={() => setActiveTab('tab4')}
        >
          Tab 4
        </button>
      </div>

      {/* Tab Content Area with Loading State */}
      <div className="tab-content">
        <Suspense fallback={<div>Loading content...</div>}>
          {renderActiveTab()}
        </Suspense>
      </div>
    </div>
  );
};

export default TabContainer;

Step 2: Add Basic Styling #

Make the tabs look functional with this CSS:

.tab-container {
  max-width: 800px;
  margin: 2rem auto;
}

.tab-nav {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.tab-btn {
  padding: 1rem 2rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  margin-right: 1rem;
  transition: color 0.2s;
}

.tab-btn.active {
  border-bottom: 2px solid #007bff;
  color: #007bff;
  font-weight: 600;
}

.tab-content {
  padding: 2rem;
  border: 1px solid #e0e0e0;
  border-top: none;
  min-height: 300px;
}

For Vue, we'll use defineAsyncComponent for on-demand loading and dynamic components to render the active tab's content.

Step 1: Create the Tab Parent Component (Vue 3 Composition API) #

<template>
  <div class="tab-container">
    <!-- Tab Navigation -->
    <div class="tab-nav">
      <button
        class="tab-btn"
        :class="{ active: activeTab === 'tab1' }"
        @click="activeTab = 'tab1'"
      >
        Tab 1
      </button>
      <button
        class="tab-btn"
        :class="{ active: activeTab === 'tab2' }"
        @click="activeTab = 'tab2'"
      >
        Tab 2
      </button>
      <button
        class="tab-btn"
        :class="{ active: activeTab === 'tab3' }"
        @click="activeTab = 'tab3'"
      >
        Tab 3
      </button>
      <button
        class="tab-btn"
        :class="{ active: activeTab === 'tab4' }"
        @click="activeTab = 'tab4'"
      >
        Tab 4
      </button>
    </div>

    <!-- Dynamic Tab Content -->
    <div class="tab-content">
      <component :is="currentTabComponent" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineAsyncComponent } from 'vue';

// Track active tab state
const activeTab = ref('tab1');

// Define async components (loads only when rendered)
const tabComponents = {
  tab1: defineAsyncComponent(() => import('./Tab1Component.vue')),
  tab2: defineAsyncComponent(() => import('./Tab2Component.vue')),
  tab3: defineAsyncComponent(() => import('./Tab3Component.vue')),
  tab4: defineAsyncComponent(() => import('./Tab4Component.vue'))
};

// Computed property to return the active tab's component
const currentTabComponent = computed(() => tabComponents[activeTab.value]);
</script>

<style scoped>
.tab-container {
  max-width: 800px;
  margin: 2rem auto;
}

.tab-nav {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.tab-btn {
  padding: 1rem 2rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  margin-right: 1rem;
  transition: color 0.2s;
}

.tab-btn.active {
  border-bottom: 2px solid #007bff;
  color: #007bff;
  font-weight: 600;
}

.tab-content {
  padding: 2rem;
  border: 1px solid #e0e0e0;
  border-top: none;
  min-height: 300px;
}
</style>

• On-Demand Loading: Both implementations only load the component when its tab is first clicked, reducing initial page load size and improving performance.
• State Preservation: If you need to keep component state (like form inputs) when switching tabs, you can use Vue's <KeepAlive> or React's conditional rendering with display: none instead of unmounting. Just note this will keep the component in memory, which trades off some performance benefits.
• Error Handling: Add error boundaries (React) or use Vue's onErrorCaptured hook to handle cases where a component fails to load, so you can show a user-friendly message instead of a broken page.

内容的提问来源于stack exchange，提问作者Prakash doma