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

Question

这是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才能显示？

Answer 1

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

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

Answer 2

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

vue-router文档

Answer 3

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

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

Answer 4

我的好像可以，从A页面（About页面）转跳到B页面（Home页面）的