VUE 监听当前路由 侦听器 watch

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

本文链接： https://blog.csdn.net/qq_35713752/article/details/102686924

侦听器：

你可以利用侦听器，响应数据的变化，例如路由，和页面中data的值，可以在他们变化的时候写相应的处理逻辑在侦听器中。

侦听器的使用很简单： watch 对象就是侦听器，只有当侦听的值改变了它才会执行。

data() {
  return {
    msg: ''
  }
},
watch:{
  msg:function(){
    this.msg = '我改变了，新的msg为：'+msg;
  }
}

代码解析： 在data中申明了msg变量为空字符串，在watch侦听器对象里面创建了 msg 的侦听，当msg的值改变时，就会执行msg 的侦听函数。

下面来一个侦听路由改变的完整代码demo： 

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

解决方案：
在【返回的导航栏】组件里面，通过 watch 对象监听当前的路由是否为首页，然后判断显示状态

代码：

<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>