vue3接收路由传参
时间: 2023-08-26 14:18:30 浏览: 137
在Vue3中,你可以使用`useRoute`来接收路由传参。在`<script setup>`标签中引入`useRoute`方法,并在`onMounted`生命周期钩子中使用`route.query`来获取query参数,使用`route.params`来获取params参数。例如:
```javascript
<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参数。例如:
```html
<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 ]
阅读全文
相关推荐


















