vue关于点击菜单高亮与组件切换

有两种

一种是 使用router-link 这种直接可以用router-link-active 来写高亮样式   组件在路由跳转后 高亮依旧存在

 

一种是：is的应用了     点击触发事件 事件改变currentView的值 可以直接改掉  ：is  这个引入文件入口

<template>
  <div class="index">
    <div class="headTop"></div>
    <div class="nav">
      <img src="../assets/img/logo.png" alt="">
      <el-row :gutter="20">
        <el-col :span="3" @click.native="tabChange('FirstScreen')"  ><div class="grid-content bg-purple">首页</div></el-col>
        <el-col :span="3" @click.native="tabChange('pagetwo')"><div class="grid-content bg-purple">场站</div></el-col>
        <el-col :span="3" @click.native="tabChange('pagethree')" ><div class="grid-content bg-purple">订舱</div></el-col>
        
      </el-row>
    </div>
    <div :is="currentView"></div>
      <!-- <div class="aaa" >asdasd</div> -->
  </div> 
</template>

<script>
import FirstScreen from '../views/containers/FirstScreen'
import pagetwo from '../views/containers/pagetwo'
import pagethree from '../views/containers/pagethree'

export default {
  name: 'index',
  components:{
    FirstScreen,
    pagetwo,
    pagethree
  },
  data () {
    return {
      FirstScreen: 'FirstScreen',
      pagetwo: 'pagetwo',
      pagethree: 'pagethree',
      currentView: 'FirstScreen',//组建切换

      activeIndex: '1',
      activeIndex2: '1',
     
    }
  },
  computed:{
   
  },
  created(){
   
  },
  methods:{
    tabChange(tabItem) {
      this.currentView = tabItem;
      console.log(this.currentView);
    }
  }
}
</script>