vue3 路由传参

在Vue3中，有多种方式可以进行路由传参。其中包括使用params传参、query传参和使用动态路由。

1. 使用params传参：可以通过在路由链接中使用params对象来传递参数。例如，可以使用<router-link :to="{name:'guest',params:{id:1}}">跳转到路由为guest页面</router-link>来传递id参数。在目标组件中，可以使用useRoute()来获取路由对象，然后通过route.params.id来获取传递的参数值[1]。

2. 使用query传参：可以通过在路由链接中使用query对象来传递参数。例如，可以使用<router-link :to="{path:'guest',query:{id:1}}">跳转到路由为guest页面</router-link>或<router-link :to="{name:'guest',query:{id:1}}">跳转到路由为guest页面</router-link>来传递id参数。在目标组件中，同样可以使用useRoute()来获取路由对象，然后通过route.query.id来获取传递的参数值[2]。

3. 使用动态路由：可以通过在路由配置中定义动态参数来传递参数。例如，在路由配置中使用{path:'/guest/:id'}来定义动态参数id。然后可以使用<router-link :to="{path:'/guest/1'}">跳转到路由为guest页面</router-link>来传递id参数。在目标组件中，可以通过useRoute()获取路由对象，然后通过route.params.id来获取传递的参数值[3]。

总结起来，Vue3中可以使用params传参、query传参和动态路由来进行路由传参。具体使用哪种方式取决于你的需求和项目的设计。