Vue中使用watch监听route.query传参的变化

最新推荐文章于 2023-10-10 13:36:51 发布
最新推荐文章于 2023-10-10 13:36:51 发布
阅读量1w 收藏 12
点赞数 2
分类专栏： vue笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57443373/article/details/120382151
版权

在Vue项目中，当路由传参jquery的值发生变化时，需要重新发送请求获取数据，刷新页面的数据。
这时我们就能通过监听器来监听路由的变化，重新发送请求。
watch用于观察和监听页面上的vue实例，当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么watch为最佳选择
一个简单的例子

  // 侦听器
  watch:{
  	//监听路由
  	//监听路由的categoryId属性的数据变化
    '$route.query.categoryId': function(){
    	// 只要categoryId的值发生变化,这个方法就会被调用
      this.list.categoryId=this.$route.query.categoryId
      //重新调用请求数据的方法，刷新页面数据
      this.findAllArticleById()
    }
  },
Maple-Ning
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中监听路由参数的变化及方法
12-13
在vue项目中，假使我们在同一个路由下，只是改变路由后面的参数值，期望达到数据的更新。 mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数，在同一页面切换id的值，并不会触发vue的声明周期函数。 可以添加路由监听： watch: { $route: { handler() { this.id = this.$route.query.id; this.getDetail(); //深度
Vue中使用Watch监听路由参数变化，获取最新的值
qq_45284875的博客
04-06 2544
今天遇到一个这样的业务场景：在同一个路由下，只改变路由后面的参数值，比如在这个页面 /aaa?id=1 ，在这个页面中点击一个按钮后 跳转到 /aaa?id=2 ，但从“/aaa?id=1”到“ /aaa?id=2”是不会触发vue的生命周期的，id变了，但页面数据不会更新，想要更新只能重新加载页面（手动刷新），但是这多么low、孬呀，作为一名追求极致用户体验的开发，怎么能容忍这种情况发生；然后就想办法监听路由参数的变化呀，在watch里监听$route和路由参数，代码如下： Vue watch监听路由q
vue在App.vue文件中监听路由变化刷新页面操作
10-14
主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue watch监听对象及对应值的变化详解
11-26
如下所示： var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听，可监听到对象、数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:tru
vue中的watch监听数据变化及watch中各属性的详解
10-18
主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue 0基础学习路线（18）—— 图解深度详述vue的queryString和$route.query及路由组件的复用、watch的使用及详细案例（附详细案例代码解析过程及版本迭代过程）
xiao廸要飞
08-02 1299
文章目录1. 重点提炼2. queryString2.1 $route.query2.2 编程式导航3. example013.1 example01-13.2 example01-23.3 example01-34. 路由组件的复用4.1 watch5. example025.1 exmaple02-15.2 exmaple02-25.3 exmaple02-3 1. 重点提炼 queryString $route.query 路由组件的复用 watch 2. queryString 有的
@Watch(‘$route.query‘, { deep: true, immediate: true })
miracle22222的博客
10-14 1923
应用场景：当收到推送消息的对话框时，点击对话框，会跳转至消息中心的页面。 最开始实现方式：使用【@Watch('$route.query')】 监听路由的参数，使用这个的原因是当停留在消息中心页面，推送出一个消息，点击推送消息，会根据不同的参数弹出对话框【但是会存在一个问题是，第一次跳转至消息中心的页面，这个监听不起效，所以就使用了路由守卫来解决这个问题。虽然该问题解决了，但是会存在在非第一次的路由跳转，这两个函数都会执行，就会弹出两个对话框的问题】 最后实现的方法：@Watch('$route.que
vue3中界面使用router，以及使用watch来监听router的改变
浩星
11-09 7140
vue3中界面使用router，以及使用watch来监听router的改变
vue中watch监听路由传来的参数变化问题
最新发布
qq_17189095的博客
10-10 878
一个组件内写了个编程路由，通过交互触发在接收参数的路由组件中watch内这样直接监视传来的参数有效如果用data接收参数，在监视就没效在data内vue-router如何响应路由参数的变化（watch监听|导航守卫）什么是路由参数的变化当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。监测路由参数变化的方法（watch监听|导航守卫）
vue监听router路由中query参数变化
qq_42103673的博客
06-08 9613
vue监听router路由中query参数变化
vue使用watch 观察路由变化，重新获取内容
08-31
本篇文章主要介绍了vue使用watch 观察路由变化，重新获取内容 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
解决Vue2.0 watch对象属性变化监听不到的问题
10-18
今天小编就为大家分享一篇解决Vue2.0 watch对象属性变化监听不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue bus.$emit触发第一次$on监听不到问题
10-15
主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
微信小程序实现watch监听
10-15
主要介绍了微信小程序实现watch监听，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue.js使用watch监听路由变化的方法
12-11
当路由发生变化后，在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎...
vue路由参数监听（watch监听route参数）
qq_17627195的博客
11-09 8596
watch: { // 根据情况 $route.query 可以换成 $route.params "$route.query": { immediate: true, // 第一次的数据，也要当做是一种变化 // 处理函数（不能修改名字） handler('新的值'，'旧的值') handler(new_value, old_value) { // 执行代码部分 }, }, } ...
watch监听（vue路由参数$route）
niangfan0788的博客
03-30 464
【代码】watch监听（vue路由参数$route）
vue2 watch的细节问题
一号斑马
07-02 500
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
watch监听数据变化
ALSO666的博客
01-13 1232
watch监听数据变化 1.最简单的监听 data() { return { name: "张三" } }, watch: { name: function (newValue,oldValue) {}, } 2.监听queryParams下的startTime data() { return { queryParams: { pageNum: 1, pageSize: 10, startTime: null, endT
vue watch监听不到路由地址变化
05-24
如果你使用的是 Vue Router，可以使用 `$route` 对象来监听路由地址的变化。具体来说，你可以在组件的 `watch` 选项中监听 `$route` 对象的变化，例如： ```javascript watch: { $route(to, from) { // 在此处处理路由地址的变化 } } ``` 另外，如果你需要在组件首次加载时也执行一次 `$route` 的变化处理逻辑，可以在 `created` 钩子中手动调用一次： ```javascript created() { this.handleRouteChange(this.$route, null) }, watch: { $route(to, from) { this.handleRouteChange(to, from) } }, methods: { handleRouteChange(to, from) { // 在此处处理路由地址的变化 } } ``` 如果上述方法依然无法监听到路由地址的变化，可能是因为你的路由地址没有发生变化。你可以在浏览器控制台中打印 `$route` 对象，观察 `$route.path` 和 `$route.query` 是否有变化。如果没有变化，可能是因为你使用了 Vue Router 的 `push` 或 `replace` 方法，但是目标地址和当前地址相同。你可以尝试使用 `push` 或 `replace` 方法时传入一个新的地址，以触发 `$route` 对象的变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值