vue中watch监听路由传来的参数变化

一个组件内写了个编程路由，通过交互触发

 this.$router.push({name: "Result",query: {// 发送搜索词给resulttitle: this.inputVal,},

在接收参数的路由组件中watch内

 watch: {// 监视搜索词变化"$route.query.title": {immediate: true,handler() {this.search();},},},

这样直接监视传来的参数有效

如果用data接收参数，在监视就没效
在data内

 data() {return {searchVal:this.$route.query.title,}}watch: {// 监视搜索词变化searchVal: {immediate: true,deep: true,handler() {console.log("a");this.search();},},},

深度监视也无效

vue中watch监听路由传来的参数变化相关推荐

Vue中watch监听路由的使用场景
created(){if(this.$route.params && this.$route.params.id){//从路径获取id值const id =this.$route.pa ...
vue中事件监听watch
vue中的watch实际上是用来监听vue实例中的数据变化. 监听String <template><div @click="stringClick">{{ ...
Vue中watch监听数据变化以及watch中各属性详解
watch使用的几种方法通过watch监听data数据的变化,数据发生变化时,就会打印当前的值 data(){return {msg: '你在想屁吃!',info: '555...',} } wat ...
Vue几种监听路由变化的方式
1.通过watch 1.1.返回 "从哪里来" 和 "哪里去" 的路由信息 watch:{$route(to,from){console.log(from.pa ...
vue中textarea监听粘贴事件获取图片
html中代码: <el-inputid="textarea"v-model="value"type="textarea"maxlen ...
vue实现实时监听文本框内容的变化（最后一种为原生js）
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
vue中用watch监听路由信息
$route为当前跳转路由可以通过$router来拿到 $router.path $router.query $router.path watch: {'$route.params.keyWords ...
and desgin Vue页面,使用watch监视, ＜a-input＞内的值, 自动计算出填入框的值,用vue中watch监听input组件的变化
and desgin Vue页面,使用watch监视, <a-input>内的值, 自动计算出填入框的值 <a>------输入[税率]与[价税合计]------</a& ...
Vue 中实现监听keydown快捷键阻止和恢复浏览器默认事件
mounted() {window.addEventListener('keydown', this.handleEvent) }, beforeDestroy() {window.removeEve ...

vue中watch监听路由传来的参数变化

vue中watch监听路由传来的参数变化相关推荐

最新文章

热门文章