> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/qian-duan-cao-zuo/shi-li-lian-xi/dong-tai-sou-suo-wang-ye/qian-duan/vue-router/01-lu-you-zu-jian-chuan-can.md).

# 路由组件传参

## 1.首页组件获取参数后进行跳转

```bash
## result为后端响应数据
onGetData(result){
        console.log(result)
        this.$router.push({name:"showData",params:{"reponsData":result}});
      }
```

## 3.路由定义时将数据与`$route`解耦

* 在组件中定义好接受数据的属性
* 在路由文件中将传递给路由的数据绑定到组件对应的属性中

```bash
 ## 组件文件
 export default {
  props:['reponsData'],
}
## 路由文件
{path:"/show/",name:"showData",component:showDataPage,props:(route)=>({reponsData:route.params.reponsData})},
```

## 参考

1. 路由组件传递参数[https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%AF%B9%E8%B1%A1%E6%A8%A1%E5%BC%8F](https://router.vuejs.org/zh/guide/essentials/passing-props.html#对象模式)