最近項目中遇到的底部導(dǎo)航欄在組件必須點兩下才可以更換樣式的問題，貼出來分享一下。
項目使用vantui的底部導(dǎo)航
建一個footer.vue

<template>
  <van-tabbar v-model="active" active-color="#07c160" inactive-color="#999">
    <van-tabbar-item to="/">
      <span>首頁</span>
      <img slot="icon" slot-scope="props" :src="props.active ? home_icon.active : home_icon.normal" />
    </van-tabbar-item>
    <van-tabbar-item icon="search" to="/order">
      <span>訂單</span>
      <img slot="icon" slot-scope="props" :src="props.active ? order_icon.active : order_icon.normal" />
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o" info="3" to="/mineHold">
      <span>待辦</span>
      <img slot="icon" slot-scope="props" :src="props.active ? agency_icon.active : agency_icon.normal" />
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/my">
      <span>我的</span>
      <img slot="icon" slot-scope="props" :src="props.active ? mine_icon.active : mine_icon.normal" />
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      home_icon: {
        normal: require("../../../static/img/icon_home.png"),
        active: require("../../../static/img/icon_home_selected.png")
      },
      order_icon: {
        normal: require("../../../static/img/icon_order.png"),
        active: require("../../../static/img/icon_order_selected.png")
      },
      agency_icon: {
        normal: require("../../../static/img/icon_wait.png"),
        active: require("../../../static/img/icon_wait_selected.png")
      },
      mine_icon: {
        normal: require("../../../static/img/icon_my.png"),
        active: require("../../../static/img/icon_my_selected.png")
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.active_tab img {
  width: 26px;
  height: 26px;
}

.active_tab .router-link-active {
  color: #07c160;
}
</style>

在app.vue全局組件中引入

<my-footer v-if="tabType"></my-footer>
import myFooter from './components/common/footer'
components: {
        myFooter
    },

在app.vue 中監(jiān)聽$route 的變化 可以獲取跳轉(zhuǎn)到的路由信息,通過 路由的name 值 進(jìn)行判斷即可

 $route(e){
      if(e.name=='Home'||e.name=='Order'||e.name=='mineHold'||e.name=='My'{
           this.tabType=true
       }else{
           this.tabType=false
       }
  }

監(jiān)聽路由,如果是需要引入底部導(dǎo)航的頁面讓其顯示，否則讓其隱藏。