頁面代碼：
<ul class="el-menu">
<li v-for="(tab ,index) in tabs" :class="{active:isActive==index}" @click="isActive=index,tabChange('selTab' + (index + 1))" class="el-menu-item">{{tab.name}}</li>
</ul>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
<script>//引入組件
import selTab1 from './profile.vue';
import selTab2 from './culture.vue';
import selTab3 from './history.vue';
import selTab4 from './trailer.vue';
export default {
data () {//定義組件數據
return {
currentView: 'selTab1', //默認tab內容
isActive: 0,
tabs: [
{name: "達豐概況"},
{name: "達豐文化"} ,
{name: "達豐中國年鑒"},
{name: "宣傳片"}
],
}
},
components: {//注冊組件
selTab1,
selTab2,
selTab3,
selTab4
},
watch:{ //監聽路由改變tab顯示項
$route(to,from){
if(to.name == 'profile'){
this.isActive = 0; //改變tab標題的高亮狀態
this.currentView = selTab1; //改變tab顯示內容
} else if(to.name == 'culture'){
this.isActive = 1;
this.currentView = selTab2;
} else if(to.name == 'history'){
this.isActive = 2;
this.currentView = selTab3;
} else if(to.name == 'trailer'){
this.isActive = 3;
this.currentView = selTab4;
}
}
},
methods: {
tabChange:function(tab){ //tab切換
this.currentView = tab;
}
},
}
</script>
<style>
.active{color:#fff;background-color: #20a0ff;}
</style>