vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据

1.先在router.js中配置路由

[code]{
path: '/movieDetail/:movieId',
name: 'movieDetail',
component:movieDetail
}

2.获取详情页的id,并派发父组件事件（movieList.vue)页面

[code] <li v-for="(item,index) in movies"  :key="index" @click="selectItem(item)">

。。。。。。。

</li>

[code] methods:{
selectItem(item){
//console.log(item.moveId);
//var item = item.moveId;
this.$emit('select',item);
}

3.在movieShow页面引用movieList.vue页面

[code]<movieList :movies="movies"  @select="movieDetail"></movieList>

[code]           //转入电影详情页
movieDetail(item){
console.log(`${item.moveId}`);
this.$router.push({
path: `/movieDetail/${item.moveId}`
})
}

效果如下：

上面获取到了 id，接下来实现详情页通过id获取数据

  1)先获取传过来的id

[code]var movieId = that.$route.params && that.$route.params.movieId;

2)引用豆瓣网的API

  /v2/movie/subject/:id

[code]const url = `api/movie/subject/${movieId}`;
that.$axios.get(url)
.then((res)=>{
console.log(res.data);
})

效果如下

3）在页面中引用

[code] <scroll class="movie-detail"
:data="movieDetail"
>

。。。。。。

</scroll>

在js中将movieDetail进行赋值   movieDetail = res.data

[code]data(){
return {
movieDetail:{}
}
},
created(){
this._getDateil();
},
components:{
scroll
},
methods:{
_getDateil(){
var that = this;
var  movieId = that.$route.params && that.$route.params.movieId;
console.log(movieId);
//that.getMovieDetail(movieId);
const url = `api/movie/subject/${movieId}`;
that.$axios.get(url)
.then((res)=>{

console.log(res.data);

movieDetail = res.data;
})
},