vue3中路由传递参数

在Vue3中，可以使用params或query来传递路由参数。

1. 使用params传递参数

在路由配置中，需要定义路由参数的名称。例如：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

在组件中，可以通过$route.params来获取路由参数。例如：

export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}

在使用router-link跳转时，可以通过to属性传递参数。例如：

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

2. 使用query传递参数

在路由配置中，不需要定义路由参数的名称。例如：

const routes = [
  {
    path: '/user',
    name: 'user',
    component: User
  }
]

在组件中，可以通过$route.query来获取路由参数。例如：

export default {
  mounted() {
    console.log(this.$route.query.id)
  }
}

在使用router-link跳转时，可以通过to属性传递参数。例如：

<router-link :to="{ name: 'user', query: { id: 123 }}">User</router-link>