• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vue vue-router路由动态修改查询参数query并且页面也要自动更新数据

在使用搜索跳转路由时我遇到了一个问题,我的使用要求是,当我在顶部搜索框输入文字并回车时,要跳转至搜索页,并且搜索页要根据我传入的路由的查询参数进行处理。

首次运行的时候很正常,路由页面能够进入,处理也能进行。

但是当我第二次的时候,也就是已经进入搜索页的情况下,再次回车搜索时,就会报错,因为我重复进入同一个路由页面了。

那么第一个问题:如何避免重复进入同一个路由报错

如何避免重复进入同一个路由报错

找了半天发现一串有意思的代码:

this.$router.push({query: {plan: 'private'}})

也就是说,我们路由跳转的时候,只传一个对象,这个对象只包含query对象。

这样我们便可以达到动态修改查询参数,并且避免了跳转同一个路由的报错。

我以为这样就行了,很简单,然而高兴的太早了。

我遇到了第二个问题!

提示报错:

Navigating to current location ("/search?value=%E7%BE%8E%E5%A5%B3") is not allowed

翻译过来的意思就是:

不允许导航到当前位置(“ / search?value =%E7%BE%8E%E5%A5%B3”)

导航当前位置???

事实上路由并没有再次跳转,只是查询参数发生了变化。

那么我们的第二个问题:Navigating to current location

Navigating to current location

这个报错带来了一些问题,比如,虽然地址栏的查询参数发生了变化,但是当前路由使用的this.$route.query.value调用的查询参数并不会发生变化。

而且watch监控这个参数也不会触发函数。

为此这个问题我找了很久,最后发现深度监控可以搞定所有问题。

代码如下:

watch: {
    $route: {
      handler() {
        this.searchValue = this.$route.query.value;
        this.retrieveData(); //这段话是我自己写的函数,在每次参数发生变化时运行
      },
      deep: true
    }
  }

然后就ok了,不在报错,并且页面功能全部正常,函数能够运行,调用的查询参数显示也会根据变化而变化。

主要注意一点,使用这个,如果你传入的query参数是相同了,依旧会报第二个问题的错误,好在不影响使用,机智一点我们可以自来个random数字啊。

0
  • 本文分类:vue 项目实战
  • 本文标签:query查询参数
  • 流行热度:已超过 926 人围观了本文
  • 最后更新:2020年04月20日 - 3时27分53秒
  • 发布日期:2020年04月18日 - 0时52分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码