VUE 监听当前路由侦听器 watch

侦听器：

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

VUE 监听当前路由侦听器 watch相关推荐

Vue全局路由侦听beforeEach路由守卫附代码使用示例
使用路由守卫beforeEach,可以实现路由侦听: 全局侦听路由跳转的实现代码: app.vue onLaunch: function(e) {this.$router.beforeEach((to ...
【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
Vue.js 计算属性和侦听器
计算属性和侦听器计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
vue计算属性computed和侦听属性watch的用法和区别
计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用.注意:计算属性里面必须要ruturn,否则无法拿到结果.计算属性 ...
Vue的计算属性、侦听属性与过滤器解析
文章目录知识点计算属性计算属性的基本使用计算属性的 setter 和 getter 侦听属性计算属性与侦听属性对比过滤器过滤器使用方法过滤器应用场景综合小练习知识点计算属性计算 ...
计算机监听的端口,侦听计算机的指定端口并分析其数据包,监听,本,解析
# 可以用80端口进行试验,只要打开浏览器浏览网页即可捕获数据包 import os ###################################### ########## ####### ...
5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
Vue属性篇_侦听器watch
作用:侦听属性,响应数据(data&computed)的变化,当数据变化时,会立即执行对应函数,其属性值可以为函数.字符串.对象和数组. 1.属性值类型 (1)函数类型函数类型中,被侦听的数 ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...

VUE 监听当前路由侦听器 watch

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

VUE 监听当前路由侦听器 watch相关推荐

最新文章

热门文章

VUE 监听当前路由 侦听器 watch

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

VUE 监听当前路由 侦听器 watch相关推荐

最新文章

热门文章

VUE 监听当前路由侦听器 watch

VUE 监听当前路由侦听器 watch相关推荐