vue3如何通过路由传递多个参数

在 Vue 3 中，你可以通过在路由路径中定义参数，然后在路由导航中通过 params 或 query 传递多个参数。

使用 params 传递多个参数：在路由路径中定义参数，例如：

const routes = [
  {
    path: '/example/:param1/:param2',
    name: 'example',
    component: ExampleComponent
  }
]

然后在路由导航中传递参数，例如：

// 在组件中使用 router.push
this.$router.push({
  name: 'example',
  params: {
    param1: 'value1',
    param2: 'value2'
  }
})

// 或者在模板中使用 router-link
<router-link :to="{ name: 'example', params: { param1: 'value1', param2: 'value2' }}">Example</router-link>

在组件中通过 $route.params 来访问参数，例如：

// 在组件中访问参数
mounted() {
  console.log(this.$route.params.param1) // 输出 'value1'
  console.log(this.$route.params.param2) // 输出 'value2'
}

使用 query 传递多个参数：在路由路径中不定义参数，例如：

const routes = [
  {
    path: '/example',
    name: 'example',
    component: ExampleComponent
  }
]

然后在路由导航中传递参数，例如：

// 在组件中使用 router.push
this.$router.push({
  name: 'example',
  query: {
    param1: 'value1',
    param2: 'value2'
  }
})

// 或者在模板中使用 router-link
<router-link :to="{ name: 'example', query: { param1: 'value1', param2: 'value2' }}">Example</router-link>

在组件中通过 $route.query 来访问参数，例如：

// 在组件中访问参数
mounted() {
  console.log(this.$route.query.param1) // 输出 'value1'
  console.log(this.$route.query.param2) // 输出 'value2'
}

以上是在 Vue 3 中通过路由传递多个参数的方法。你可以根据自己的需求选择使用 params 或 query