study_sm/src/containers/center/components/menu/iheader.vue

<template>
  <div class="nav">
      <ul>
        <li :class="{'navfirst': isActive('/login')}">
          <a href="#/" @click="goto('/login')"> 回到主页</a>
        </li>

        <li :class="{'navfirst': isActive('/center/home')}">
          <a href="#/center/home" @click="goto('/center/home')"> 学员中心</a>
        </li>

        <li :class="{'navfirst': isActive('/center/setting')}">
          <a href="#/center/setting" @click="goto('/center/setting')">账号设置</a>
        </li>

        <li :class="{'navfirst': isActive('/center/class/train')}">
          <a href="#/center/class/train" @click="goto('/center/class/train')">我的学习</a>
        </li>

        <li :class="{'navfirst': isActive('/center/market')}">
          <a href="#/center/market" @click="goto('/center/market')">推荐课程</a>
        </li>

        <li :class="{'navfirst': isActive('/center/myOrder')}" >
          <a href="#/center/myOrder" @click="goto('/center/myOrder')">我的订单</a>
        </li>

        <li :class="{'navfirst': isActive('/center/sign')}" >
          <a href="#/center/sign" @click="goto('/center/sign')">学时证明</a>
        </li>
      </ul>
    </div>
</template>

<script>
  import menu from './menu.js'
  export default {
    props: {
      user: {
        type: Object,
        default: {
          nickanme: ''
        }
      }
    },
    data() {
      return {
        exportLoading: false,
        menu:menu,
        listLoading: false,
        groups: [],
        tableData: []
      };
    },
    methods: {
      goState( item ){
        if( item.children){
          this.goSubState( item.children[0] );
        }else{
          this.goSubState( item );
        }
      },
      goto( path ){
        if( this.$route.path != path){
          this.$router.push({path})
        }
      },
      goSubState(item){
        if(item.path == this.$route.path) return;
        this.$router.push(item.path);
      },
      isActive( path ){
        let rpath = this.$route.path;
        return rpath.indexOf( path )> -1;
      }
    }
  }
</script>

<style>
  @import url("./index.css");
  .nav{ height:50px; background:#4679fe; margin:1px auto; width:1009px;}
  .nav ul li{ float:left; line-height:50px;}

  .nav ul li a{ padding:0 27px; color:#FFF; display:block; height:50px;}

  .nav ul li a:hover{ background:greenyellow; text-decoration:none;}
  .navfirst a{ background:#ffa200; display:block;}
</style>