vue3.2路由跳转传递参数

在Vue 3.2中，可以使用`router.push`方法来实现路由跳转，并传递参数。

首先，确保你已经在项目中安装了Vue Router，并在Vue实例的配置中引入了路由。

在组件中，通过调用`this.$router.push`方法来执行路由跳转，并通过`query`或`params`对象来传递参数。

1. 使用query传递参数：

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

在目标组件中，可以通过`$route.query`来获取传递的参数：

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

2. 使用params传递参数：

首先，在路由配置中定义动态路由参数：

{
  path: '/destination/:id/:name',
  name: 'destination',
  component: DestinationComponent
}

然后，在原组件中执行路由跳转时传递参数：

this.$router.push({
  name: 'destination',
  params: { id: 123, name: 'example' }
})

在目标组件中，可以通过`$route.params`来获取传递的参数：

mounted() {
  console.log(this.$route.params.id) // 输出: 123
  console.log(this.$route.params.name) // 输出: example
}

这样就可以通过路由跳转传递参数了。注意，使用`query`传递参数时，参数会显示在URL中；而使用`params`传递参数时，参数会作为URL的一部分。