在Vue中实现随hash改变响应菜单高亮

watch $route 对象
const User = {
 template: '...',
 watch: {
 $route(to, from) {
  // react to route changes...
 }
 }
}

const User = {
 template: '...',
 beforeRouteUpdate(to, from, next) {
 // react to route changes...
 // don't fet to call next()
 }
}

<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',
 ponents:{
 FirstScreen,
 pagetwo,
 pagethree
 },
 data () {
 return {
  FirstScreen: 'FirstScreen',
  pagetwo: 'pagetwo',
  pagethree: 'pagethree',
  currentView: 'FirstScreen',//组建切换
 
  activeIndex: '1',
  activeIndex2: '1',
  
 }
 },
 puted:{
 
 },
 created(){
 
 },
 methods:{
 tabChange(tabItem) {
  this.currentView = tabItem;
  console.log(this.currentView);
 }
 }
}
</script>