页面代码：
<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>