Vue Tabダイナミックレンダリングコンポーネントの操作を切り替えます。

を使用します。
Element-UIを結合するナビゲーションメニュー：
UIコンポーネント
el-menu-intemのindexは対応するコンポーネント名を書きます。
イベント@select="handleSelect"をクリックします。

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="Home">  </el-menu-item>
  <el-menu-item index="About">    </el-menu-item>
</el-menu>
<component :is="activeIndex"></component>

クリックイベントでコンポーネント名を動的に設定します。

handleSelect(index) {
  this.activeIndex = index
}

完全コード

 <template>
  <div id="app">
   <!--     -->
   <el-row class="home_nav" type="flex" justify="flex-start" align="middle">
    <el-col :span="2" :offset="4">
     <div>LOGO</div>
    </el-col>
    <el-col :span="12">
     <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="Home">  </el-menu-item>
      <el-menu-item index="About">    </el-menu-item>
     </el-menu>
    </el-col>
   </el-row>
   <component :is="activeIndex"></component>
  </div>
 </template>
 
 <script>
 import Home from './components/Home.vue'
 import About from './components/About.vue'
 
 export default {
  name: 'app',
  components: {
   Home,
   About
  },
  data(){
   return {
    activeIndex: "Home"
   }
  },
  methods: {
   handleSelect(index) {
    this.activeIndex = index
   }
  }
 }
 </script>
 <style>
 </style>

補足知識：vueダイナミックコンポーネント（tabs切替）keep-alive：コンポーネントの状態を保持するために主に使用されるか、再レンダリングを避けるために使用される。
keep-aliveでデータ値を保持してデータを記入すると他のページに切り替わり、現在のページのデータ保持に戻ります。コンポーネントの状態を保持するか、再レンダリングを避けるために主に使用されます。

 
 <!--    -component  -->
 <div class="app">
 <ul>
  <li @click="currView='home'">  </li>
  <li @click="currView='abount'">    </li>
 </ul>
 <!--  keep-alive                   ，          -->
 <keep-alive>
  <component :is="currView"></component>
 </keep-alive>
 </div>

<script type="text/x-Template" id="homeTemp">
   <h2>    </h2>
</script>
<script type="text/x-Template" id="abountTemp">
   <h2>      <input type="text"/></h2>
</script>

<script type="text/javascript">
 var vm=new Vue({
  el:'.app',
  data:{
   currView:"home"
  },
  components:{
   "home":{
     template:"#homeTemp"
   },
   "abount":{
    template:"#abountTemp"
   }
  }
 });
 
</script>

以上のこのVueはTabダイナミックレンダリングコンポーネントを切り替える操作は小編集が皆さんに提供した内容の全部を共有しています。皆様に参考にしていただければと思います。どうぞよろしくお願いします。