vue路由传参的两种方式

Vue路由传参有两种方式。第一种是使用params传参。在路由配置中，可以在path中添加对应的参数，例如`/:param`。在跳转页面时，可以使用`this.$router.push({name: 'test', params: {name: 'tom'}})`来传递参数。在接收参数的页面中，可以使用`this.$route.params.name`来获取传递的参数。这种方式的缺点是，当页面刷新后，传递的参数会变成undefined。\[2\]

第二种方式是使用query传参。在跳转页面时，可以使用`this.$router.push({path: '/test', query: {name: 'tom'}})`来传递参数。在接收参数的页面中，可以使用`this.$route.query.name`来获取传递的参数。这种方式的优点是，即使页面刷新，传递的参数也不会丢失。\[3\]
#### 引用[.reference_title]
- *1* [Vue路由传参两种方式](https://blog.csdn.net/weixin_41080999/article/details/80379441)[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^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [VUE路由传参的两种方式](https://blog.csdn.net/weixin_42250577/article/details/115296970)[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^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]