vant底部导航点击两次才能更换样式的问题

最近项目中遇到的底部导航栏在组件必须点两下才可以更换样式的问题，贴出来分享一下。
项目使用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 中监听$route 的变化 可以获取跳转到的路由信息,通过 路由的name 值 进行判断即可

 

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

监听路由,如果是需要引入底部导航的页面让其显示，否则让其隐藏