使用<component :is="元件名"></component>

結合Element-UI的導航選單 :

UI元件

el-menu-item裡的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動態渲染元件的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。