vue3 this.$router.push()跳转页面传参，取参

在Vue3中，你可以使用`this.$router.push()`方法进行页面的跳转，并且可以在跳转时通过`params`参数或者`query`参数传递参数，具体如下：

1. 使用`params`参数传递参数

  // 跳转并传递参数
  this.$router.push({ path: '/target', params: { id: 123 } })

  // 在目标页面中通过$route.params.id取出参数

2. 使用`query`参数传递参数

  // 跳转并传递参数
  this.$router.push({ path: '/target', query: { id: 123 } })

  // 在目标页面中通过$route.query.id取出参数

需要注意的是，使用`params`参数传递的参数会在跳转后被加入到目标路由的path中，而使用`query`参数传递的参数则会作为查询字符串附加到URL后面。

相关问题

vue的this.$router.push()传参方法

在Vue中，我们可以使用this.$router.push()方法进行路由跳转。如果我们需要传递参数，则可以在push()方法的第二个参数中传递一个对象，该对象中包含需要传递的参数。例如：

this.$router.push({ path: '/example', query: { id: '123' }})

上述代码中，我们传递了一个对象作为第二个参数，该对象包含path和query两个属性。其中，path表示需要跳转到的路由路径，query表示需要传递的参数，以键值对的形式存储。

在接收参数的组件中，我们可以通过this.$route.query来获取传递过来的参数。例如：

mounted () {
  console.log(this.$route.query.id) // 输出123
}

注意：如果需要传递的参数较多，建议使用params进行传参，而不是query。因为params可以在url中进行显示，而query则不会。

vue的this.$router.push()传参方法params

在Vue中，我们可以通过this.$router.push()方法来进行路由的跳转，并且可以向目标路由组件传递参数。其中，使用params传参的方式是将参数作为对象的形式进行传递。

具体来说，在使用this.$router.push()方法进行路由跳转时，我们可以在第二个参数中传递一个对象，该对象中的属性就是我们要传递的参数，例如：

this.$router.push({
  path: '/detail',
  params: {
    id: 1,
    name: 'vue'
  }
})

在上述代码中，我们将要跳转的路由路径设为'/detail'，并通过params属性向目标路由组件传递了一个包含id和name两个属性的对象。

在目标路由组件中，我们可以通过$route.params对象来获取传递过来的参数，例如：

export default {
  mounted () {
    console.log(this.$route.params.id) // 输出1
    console.log(this.$route.params.name) // 输出'vue'
  }
}

需要注意的是，使用params传参的方式只适用于路由路径中不包含动态参数（如:id）的情况，如果要传递动态参数，应该使用query传参方式。