vue3接收路由传参

在Vue3中，你可以使用`useRoute`来接收路由传参。在`<script setup>`标签中引入`useRoute`方法，并在`onMounted`生命周期钩子中使用`route.query`来获取query参数，使用`route.params`来获取params参数。例如：

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

const route = useRoute();

onMounted(() => {
 console.log(route.query.id); // 通过query传递的参数
  console.log(route.params.id); // 通过params传递的参数
})
</script>

对于params参数的传递，你可以使用`<router-link>`标签来跳转到指定路由，并在`to`属性中传递params参数。例如：

<router-link :to="{ name: 'guest', params: { id: 1 } }">跳转到路由为guest页面</router-link>

当使用`router-link`跳转到guest页面时，参数id会作为params参数传递给目标路由。刷新页面后，参数id会保留在路由的path中，你可以通过`route.params.id`来获取该参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3路由跳转and接收参数](https://blog.csdn.net/qq_58633408/article/details/126245193)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]