VUE 监听当前路由 侦听器 watch

186 篇文章 4 订阅
91 篇文章 4 订阅

侦听器:

你可以利用侦听器,响应数据的变化,例如路由,和页面中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>

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue中的watch是一个侦听器,用于监听数据的变化,并在数据变化时执行相应的操作。通过watch,我们可以监听某个数据的变化,并在数据变化时执行一些特定的逻辑,例如发送网络请求、更新UI等。 watch的语法如下: ```javascript watch: { // 监听的数据 someData: function (newValue, oldValue) { // 在数据变化时执行的操作 // newValue为新值,oldValue为旧值 } } ``` 可以通过watch监听单个数据的变化,也可以监听多个数据的变化: ```javascript watch: { // 监听单个数据的变化 someData: function (newValue, oldValue) { // 在数据变化时执行的操作 }, // 监听多个数据的变化 anotherData: function (newValue, oldValue) { // 在数据变化时执行的操作 } } ``` watch还可以使用深度监听监听对象或数组中的属性变化: ```javascript watch: { // 监听对象中某个属性的变化 'obj.prop': function (newValue, oldValue) { // 在属性变化时执行的操作 }, // 监听数组中某个元素的变化 'arr.0': function (newValue, oldValue) { // 在元素变化时执行的操作 } } ``` 除了监听数据的变化,watch还可以监听路由参数的变化: ```javascript watch: { // 监听路由参数的变化 $route: function (to, from) { // 在路由参数变化时执行的操作 } } ``` 总之,watchVue中非常重要的一个功能,它可以帮助我们监听数据、路由参数等的变化,并在变化时执行相应的操作,从而实现更加复杂的应用逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a_靖

对你有帮助吗?打赏鼓励一下?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值