在寫專案過程中有以下這個需求。如果使用el-tabs標籤頁會使頁面程式碼過多且不適合維護。所以使用了以下方法進行了修改，非常簡單。

效果圖

 <div class="main-container">
   <el-tabs v-model="currentView">
     <!--name對應路由名-->
     <el-tab-pane label="登入日誌" name="Television"></el-tab-pane>
     <
 
el-tab-pane label="操作日誌" name="Movie"></el-tab-pane>
   </el-tabs>
   <keep-alive></keep-alive>
   <!--:is 的作用：會將div標籤轉換成 currentView 變數繫結的這個元件-->
   <div :is="currentView"></div> <!-- 預設選中 -->
 </div>

 components: {
    //以下方式引入路由是路由的懶載入，有利於頁面優化
 

    Television: (resolve) => {
      require(["./logIn.vue"], resolve);
    },
    Movie: (resolve) => {
      require(["./operation.vue"], resolve);
    },
  },
  data() {
    return {
      currentView: "Television", //當前元件
    };
  },