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

最新推荐文章于 2024-08-26 21:23:42 发布
最新推荐文章于 2024-08-26 21:23:42 发布
阅读量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
关注
专栏目录
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(); //深度
Vue3中组件内如何监听route
weixin_44800563的博客
08-18 1484
<script lang="ts"> import {useRoute} from 'vue-router' export default { setup() { const $route = useRoute() watch(() => $route.query, () => { //do something }, {immediate: true} //options放这 } } </script>
watch 监听 “$route.query“ 页面离开的时候也会执行 如何处理
Sherry Tian的博客
08-26 249
今天在开发项目中发现一个bug，因为我在search页面使用了watch监听了路由参数的变化，在切换页面到其他页面的时候，发生了一个弹框null，这是调用接口报错的提示信息。就是上面这段代码，让我尴尬的不行，应该还有其他更好的解决方案，先记下来，后续研究了再来更新。尴尬啊，没遇见过这种情况，记录下。
Vue 0基础学习路线（18）—— 图解深度详述vue的queryString和$route.query及路由组件的复用、watch的使用及详细案例（附详细案例代码解析过程及版本迭代过程）
xiao廸要飞
08-02 1400
文章目录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 2003
应用场景：当收到推送消息的对话框时，点击对话框，会跳转至消息中心的页面。 最开始实现方式：使用【@Watch('$route.query')】 监听路由的参数，使用这个的原因是当停留在消息中心页面，推送出一个消息，点击推送消息，会根据不同的参数弹出对话框【但是会存在一个问题是，第一次跳转至消息中心的页面，这个监听不起效，所以就使用了路由守卫来解决这个问题。虽然该问题解决了，但是会存在在非第一次的路由跳转，这两个函数都会执行，就会弹出两个对话框的问题】 最后实现的方法：@Watch('$route.que
vue3中界面使用router，以及使用watch来监听router的改变
浩星
11-09 1万+
vue3中界面使用router，以及使用watch来监听router的改变
vue路由参数监听（watch监听route参数）
qq_17627195的博客
11-09 8799
watch: { // 根据情况 $route.query 可以换成 $route.params "$route.query": { immediate: true, // 第一次的数据，也要当做是一种变化 // 处理函数（不能修改名字） handler('新的值'，'旧的值') handler(new_value, old_value) { // 执行代码部分 }, }, } ...
vue中watch监听路由传来的参数变化问题
qq_17189095的博客
10-10 1017
一个组件内写了个编程路由，通过交互触发在接收参数的路由组件中watch内这样直接监视传来的参数有效如果用data接收参数，在监视就没效在data内vue-router如何响应路由参数的变化（watch监听|导航守卫）什么是路由参数的变化当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。监测路由参数变化的方法（watch监听|导航守卫）
vue.js使用watch监听路由变化的方法
10-18
下面将详细介绍如何在Vue.js中使用 `watch` 监听路由变化。 首先，Vue Router 是Vue.js的一个官方插件，用于管理应用程序中的路由。在Vue应用中，路由变化通常通过`router.push`或导航链接触发。`$route` 是Vue ...
vue实例，watch监听路由地址的改变
08-19
在Vue实例中，我们可以使用`watch`选项来监听任何属性或表达式的变化，包括路由参数。`watch`对象中的键是你要监听的属性，值是一个回调函数，该函数会在监听的属性变化时执行。要监听路由的改变，我们需要监听`$...
使用watch监听路由变化和watch监听对象的实例
08-27
在上述示例中，当`form.region`的值发生变化时，watch监听器会触发。我们可以获取到新值`newValue`和旧值`oldValue`，然后进行需要的处理，比如在用户更改选择后，可能需要提交数据到后端或者根据选择变更其他表单...
vue监听router路由中query参数变化
qq_42103673的博客
06-08 1万+
vue监听router路由中query参数变化
watch监听（vue路由参数$route）
niangfan0788的博客
03-30 555
【代码】watch监听（vue路由参数$route）
vue2 watch的细节问题
一号斑马
07-02 634
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例
vue3中路由传参query、params及动态路由传参详解
热门推荐
极客神殿
12-22 1万+
编程式导航 使用 或者 的时候，改为对象形式新增 必须传入一个对象 接受参数 使用 的 二、传参 编程式导航 使用 或者 的时候，改为对象形式并且只能使用，无效，然后传入 接受参数 使用 的 三、动态传参 很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 接受参数 使用 的 四、传参和传参的区别 传参配置的是 ，而
watch监听数据变化
ALSO666的博客
01-13 1406
watch监听数据变化 1.最简单的监听 data() { return { name: "张三" } }, watch: { name: function (newValue,oldValue) {}, } 2.监听queryParams下的startTime data() { return { queryParams: { pageNum: 1, pageSize: 10, startTime: null, endT
Vue3 路由跳转传参query参数（router）
gurenchang的博客
07-29 2464
Vue3对路由部分进行了优化与更新，与Vue2相比路由跳转的传值的方式有所不同Vue3新增了两个API：useRouter和useRoute。
【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法
慕白Lee的博客
09-27 1万+
在这个示例中，我们在组件的`data`选项中定义了一个`monitoredParam`属性，用于存储监控的参数值。当监控的参数发生变化时，`watch`函数会被触发，将新的参数值保存到组件的`monitoredParam`属性中。在这个示例中，我们在组件的`data`选项中定义了一个`monitoredRoute`属性，用于存储监控的路由信息。当路由发生变化时，`watch`函数会被触发，将新的路由信息保存到组件的`monitoredRoute`属性中。
vue2 深度监听 this.$route.query
最新发布
09-28
Vue2 中深度监听 `this.$route.query` 可以通过监听路由参数的变化来动态响应视图。在 Vue 实例中，你可以使用 `watch` 方法结合 `deep: true` 参数来实现这一功能。例如： ```javascript export default { data() { return { queryParams: {} } }, watch: { $route({ query }) { this.queryParams = query // 将查询参数复制到自定义的数据属性里 // 这里可以对 queryParams 进行深度处理或更新视图 // 如果有需要，还可以触发一些组件内部的更新操作 this.updateComponentState(); }, queryParams: { handler(newQuery) { // 当 queryParams 发生变化时，这个回调会被调用 // 注意这里不需要 deep: true，因为我们在上面已经做了深拷贝 this.updateViewBasedOnNewQuery(newQuery); }, deep: true // 对于嵌套的对象或数组，需要设置 deep 为 true 来进行深度监听 } }, methods: { updateComponentState() { // 更新组件状态或其他业务逻辑 }, updateViewBasedOnNewQuery(newQuery) { // 根据新的 queryParams 更新视图 } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值