最近項目中遇到的底部導航欄在組件必須點兩下才可以更換樣式的問題沟突，貼出來分享一下烙无。
項目使用vantui的底部導航
建一個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 的變化 可以獲取跳轉到的路由信息,通過 路由的name 值 進行判斷即可

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

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