vue router 传参获取不到问题

2021-11-02  本文已影响0人  Henry01

A组件跳转B组件并传参

methods: {
  // 点击列表
    tableClick (row) {
      this.$router.push({
        path: 'List',
        params: {
          userId: 123
        }
      })
    },
}

B组件,params接收不到参数

mounted: {
  console.log(this.$route.params.userId)
}

导致这样的原因是因为params需要通过name来获取,这里就要明白query和params的区别。
query要用path来引入,接收参数都是this.route.query.name。query类似于ajax中get传参,即在浏览器地址栏中显示参数。 params要用name来引入,接收参数都是this.route.params.name。params则类似于post,即在浏览器地址栏中不显示参数。

A代码改为如下即可:path: 'List' 改为 name: 'List',

methods: {
  // 点击列表
    tableClick (row) {
      this.$router.push({
        name: 'List',
        params: {
          userId: 123
        }
      })
    },
}
上一篇下一篇

猜你喜欢

热点阅读