<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="Home">首頁(yè)</el-menu-item>
  <el-menu-item index="About">關(guān)于我們</el-menu-item>
</el-menu>
<component :is="activeIndex"></component>

handleSelect(index) {
  this.activeIndex = index
}

 <template>
  <div id="app">
   <!-- 導(dǎo)航欄 -->
   <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">首頁(yè)</el-menu-item>
      <el-menu-item index="About">關(guān)于我們</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>

 
 <!--動(dòng)態(tài)組件-component使用-->
 <div class="app">
 <ul>
  <li @click="currView='home'">首頁(yè)</li>
  <li @click="currView='abount'">關(guān)于我們</li>
 </ul>
 <!--通過(guò)keep-alive 保留數(shù)據(jù)值 填寫數(shù)據(jù)時(shí)切換到其他頁(yè)面，后返回當(dāng)前頁(yè)數(shù)據(jù)保留-->
 <keep-alive>
  <component :is="currView"></component>
 </keep-alive>
 </div>

<script type="text/x-Template" id="homeTemp">
   <h2>首頁(yè)數(shù)據(jù)</h2>
</script>
<script type="text/x-Template" id="abountTemp">
   <h2>關(guān)于我們數(shù)據(jù)<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>