VUE 导航、左侧菜单联动实现 tab根据路由切换联动内容

页面代码：

<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>