[TOC]
## 小程序vue对比
[小程序](https://www.kancloud.cn/book/henputongderen/xiaochengxu/edit)
[vue](https://www.kancloud.cn/book/henputongderen/vuexuexi/edit)
## 重点知识点 获取服务器端的数据
### 1.componentDidMount()
> 组件输出到 DOM 后会执行 componentDidMount() 钩子
> 安装组件时，该方法会触发
- 主页
```
componentDidMount() {
1.指定地址
2.通过axios发送请求并获取数据，设置数据到state
}
import axios from 'axios-jsonp-pro'; //跨域要引入
constructor(props){
super(props);
this.state = {
movie:[] //定义值
}
}
componentDidMount(){
var id = this.props.match.params.id;
var url = "http://api.douban.com/v2/movie/"+id;
axios.jsonp(url).then(res=>{
this.setState({
movie:res
})
})
}
```
### 2.传递参数
- 组件
```
依赖
yarn add react-router-dom
npm i react-router-dom --save
```
```
import { Link } from 'react-router-dom' //要安装依赖
<Link to = {'/Detail/' + this.props.movie.id}>
<div className="movie">
<img src={this.props.movie.imgUrl} alt\=""/>
<p>{this.props.movie.title}</p>
</Link>
```
### 3.设置路由
- Router.js
```
import Detail from './pages/Detail';
<Route path = "/detail/:id" component = {Detail} />
```
### 3.获取别的页面传来的值
- 跳转页
```
constructor(props){
super(props);
this.state={
imgUrl:"",
title:"",
summary:""
}
}
componentDidMount(){
//获取路由中传过来的id
var id =this.props.match.params.id;
var url ="http://api.douban.com/v2/movie/subject/"+id;
axios.jsonp(url).then(res=>{
var {images,title,summary}=res;
this.setState({
imgUrl:images.small,
title,
summary
})
})
}
```
