contract/src/App.vue

<template>
  <div class="safari-fix" :class="{'hide-bar':!showTabbar}" id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
    <mt-tabbar v-model="selectedTab" v-if="showTabbar">
      <mt-tab-item id="index">
        <img slot="icon" :src="icon_now.index">
        首页
      </mt-tab-item>
      <mt-tab-item id="contract">
        <img slot="icon" :src="icon_now.contract">
        合同
      </mt-tab-item>
      <mt-tab-item id="contact">
        <img slot="icon" :src="icon_now.contact">
        联系人
      </mt-tab-item>
      <mt-tab-item id="my">
        <img slot="icon" :src="icon_now.my">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>

  import icon_index from '../static/tabbar/index.png';
  import icon_contract from '../static/tabbar/contract.png';
  import icon_contact from '../static/tabbar/contact.png';
  import icon_my from '../static/tabbar/my.png';
  import icon_index_active from '../static/tabbar/index_active.png';
  import icon_contract_active from '../static/tabbar/contract_active.png';
  import icon_contact_active from '../static/tabbar/contact_active.png';
  import icon_my_active from '../static/tabbar/my_active.png';
export default {
  name: 'App',
  data(){
    return{
      selectedTab:'index',
      icon_now:{
        index:icon_index_active,
        contract:icon_contract,
        contact:icon_contact,
        my:icon_my
      },
      icon:{
        index:icon_index,
        contract:icon_contract,
        contact:icon_contact,
        my:icon_my
      },
      icon_active:{
        index:icon_index_active,
        contract:icon_contract_active,
        contact:icon_contact_active,
        my:icon_my_active
      },
      showTabbar:true

    }
  },
  mounted(){
    console.log(this.$router.currentRoute.path)
    let showTab=['/index','/contract','/contact','/my'];
    if(!~showTab.indexOf(this.$router.currentRoute.path)){
      this.showTabbar=false
    }else{
      this.showTabbar=true;
      this.selectedTab=this.$router.currentRoute.path.substr(1);
    }
  },
  watch:{
    'selectedTab':function(val){
      this.$router.push('/'+val);

      for(let i in this.icon_now){
        this.icon_now[i]=this.icon[i];
      }
      this.icon_now[val]=this.icon_active[val];

    },
    '$route' (to, from) {
      // console.log(this.$route.json.path)
      // console.log(to)
      let showTab=['/index','/contract','/contact','/my'];
      if(!~showTab.indexOf(to.path)){
        this.showTabbar=false
      }else{
        this.showTabbar=true
        this.selectedTab=to.path.substr(1);
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>