为什么router-link传递参数后用this.$route.query获取的数据刷新才能出来?

这是A页面的路由:<router-link :to=”{path: ‘Problemdetails’, query: {id: v.title}}”>{{v.title}}</router-link>

跳转B页面之后我是这样获取的:

mounted: function () {

console.log(this.$route.query.id)

}

A页面和B页面是同一级的组件

为什么点击A页面后进入B页面获取不到query?只有刷新一下console.log才能显示?

回答:

把获取数据的代码写到一个方法里,比如:

motheds: {
  getData () {
    let id = this.$route.query.id
    ...(你获取数据的步骤)
  }
},
mounted () {
  this.getData()
},
watch: {
  '$route' (to, from) {
    // 刷新参数放到这里里面去触发就可以刷新相同界面了
    this.getData()
  }
}

回答:

beforeRouteUpdate可以解决组件复用获取数据的问题

vue-router文档

回答:

和我一样的问题, 复用相同的页面也就是相同的route, 然后传入的参数不同, vue并不会重新发起请求, 我尝试加了 watch 监控参数变化, 重新调用获取数据方法, 但是实际的结果是 传入query执行了一次获取数据, 又执行了一次默认参数获取数据, 最终结果就是用默认页面的数据把我想要的数据覆盖掉了.

    watch: {
        '$route' (to, from) {
            console.log(this.$route.query)
            this.getData()
        }
    },

回答:

我的好像可以,从A页面(About页面)转跳到B页面(Home页面)的
图片描述
图片描述

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注