vue路由传参prop
时间: 2023-09-02 15:11:29 浏览: 61
在Vue中,可以通过props配置项来简化接收参数的操作。路由传参可以通过query和params两种方式实现。
对于query方式,可以使用$router.query.xxx来接收参数。在router-link中,可以使用name或path来指定路由。需要注意的是,声明路由时,需要使用占位符来声明参数。例如,如果需要传递id和content两个参数,可以在路由配置中使用占位符来声明:
```javascript
export default new VueRouter({
routes: [
{
path: '/Father',
component: father,
props: route => ({ id: route.query.id, content: route.query.content })
}
]
})
```
对于params方式,可以使用this.$route.params.xxx来接收参数。在router-link中,只能使用name来指定路由。同样需要在路由配置时使用占位符声明参数。例如:
```javascript
export default new VueRouter({
routes: [
{
path: '/Father/:id/:content',
component: father,
props: true
}
]
})
```
通过上述配置,就可以在组件的props配置项中直接接收路由参数,简化了接收参数的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [【Vue | 补洞 | 17】路由传参 & 路由prop配置](https://blog.csdn.net/weixin_42678675/article/details/123731812)[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_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]