vue3 ts 路由传参

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

1. 使用params传递参数：可以通过在<router-link>中设置params来传递参数。例如：<router-link :to="{name:'guest',params:{id:1}}">跳转到路由为guest页面</router-link>。在目标路由的组件中，可以使用useRoute()来获取参数。例如，在组件中使用useRoute()获取参数的示例代码如下：

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted } from 'vue';

const route = useRoute();

onMounted(() => {
  console.log(route.params.id); // 输出1
})
</script>

2. 使用query传递参数：可以通过在<router-link>中设置query来传递参数。例如：<router-link :to="{path:'guest',query:{id:1}}">跳转到路由为guest页面</router-link>。在目标路由的组件中，可以使用useRoute()来获取参数。例如，在组件中使用useRoute()获取参数的示例代码如下：

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted } from 'vue';

const route = useRoute();

onMounted(() => {
  console.log(route.query.id); // 输出1
})
</script>

综上所述，以上是在Vue3中使用路由传参的方法。
#### 引用[.reference_title]
- *1* *2* *3* [Vue3路由传参](https://blog.csdn.net/qq_54334713/article/details/126721772)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]