vue 3 路由传参
时间: 2023-09-23 18:12:38 浏览: 60
在Vue 3中,可以使用两种方式进行路由传参:query参数和params参数。
1. 使用query参数进行路由传参。在A页中,可以使用`<router-link>`标签传递参数,将参数作为query的一部分传递给B页。例如:
```
<router-link :to="{ path: '/detail', query: { id: '1001' } }">到详情页</router-link>
```
在B页中,可以使用`useRoute`方法从路由对象中获取参数。例如:
```
import { useRoute } from 'vue-router'
const route = useRoute()
console.log('route:', route.query.id)
```
2. 使用params参数进行路由传参。在A页中,可以使用`<router-link>`标签传递参数,将参数作为params的一部分传递给B页。例如:
```
<router-link :to="{ name: 'detail', params: { id: '1001' } }">到详情页</router-link>
```
在B页中,同样可以使用`useRoute`方法从路由对象中获取参数。例如:
```
import { useRoute } from 'vue-router'
const route = useRoute()
console.log('route:', route.params.id)
```
需要注意的是,在路由配置文件(通常是index.js)中,需要将路由路径配置为动态路径。例如:
```
path: '/detail/:id'
```
这样,就可以在Vue 3中使用query参数或params参数进行路由传参了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue路由传参 vue路由传参](https://download.csdn.net/download/weixin_39709920/87065136)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3路由及传参](https://blog.csdn.net/leveretz/article/details/127765076)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)