在app.vue里面注册的组件，然后想在首页不显示，需要怎样控制呢？vue切换路由的时候，在哪儿监控路由变化呢？

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Miss_liangrm/article/details/102662154

需求是这样的：

除了首页之外，每个页面上都要显示一个【返回的导航栏】。

那么问题来了，怎样控制首页返回导航栏的显示与隐藏呢。

思路：

在【返回的导航栏】组件里面，监听路由的变化，然后在监听里面进行判断即可。

代码：

<template>
  <div id="back" v-if="isShowBack">
    <div class="back_box" @click="toBack()">
      <span class="left_arrow">
        <img src="../../../static/images/icon_arrow_bottom_left.png" />
      </span>
    </div>
  </div>
</template>

<script>
  var that;
  export default {
    data() {
      return {
        msg: '',
        isShowBack:false
      }
    },
    methods: {
      toBack() {
        console.log('点击了返回')
        this.$router.go(-1);
      }
    },
    watch:{
      '$route':function(){
        that = this;
        console.log('watch里面',that.$route.name);
        if(that.$route.name == 'HomeNew'){
          that.isShowBack = false;
        }else{
          that.isShowBack = true;
        }
      }
    }
  }
</script>

<style scoped="scoped">
  .back_box {
    width: 100%;
    height: 30px;
    background: #f1f1f1;
  }

  .left_arrow {
    width: 22px;
    display: inline-block;
    transform: rotate(90deg);
    margin-top: 4px;
    margin-left: 4px;
  }

  .left_arrow img {
    width: 100%;
  }
</style>

------完。