Vue通过url参数获取当前页数据,动态改变query参数后,返回无法获取最新数据问题


需求背景:

A页面通过query: { sno: xxxx } 跳转到B页面

B页面通过接收sno参数,请求获取数据:

// 查询商品详情, 在created生命周期调用
async getGoodsInfo () {
  const res = await this.$post(this.$url.goods.gooddetail, {
      sno: this.$route.query.sno
  })
}

B页面底部有相关产品列表,点击产品动态改变当前query中的sno值:

// 点击相关热销商品
changeDetailSno (skuSno) {
  const query = this.$router.history.current.query
  const path = this.$router.history.current.path
  const newQuery = JSON.parse(JSON.stringify(query))
  newQuery.id = val;
  this.$router.push({ path, query: newQuery })
 
  window.scrollTo(0, 0)
  this.getGoodsInfo()
}

问题描述:动态改变query参数后,返回上一级后,发现数据还是最后一次请求的数据,没有更新为对应id的数据

解决方案:通过监听路由,重新调用获取list方法

watch: {
  // 监听路由,调用详情方法
  $route: 'getGoodsInfo'
}

声明:Jensonhui's blog|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Vue通过url参数获取当前页数据,动态改变query参数后,返回无法获取最新数据问题


Just do it.