1。先在router.js中配置路由
{
路径:/movieDetail: movieId,
名称:“movieDetail”,
组件:movieDetail
}
2。获取详情页的id,并派发父组件事件(movieList.vue)页面
& lt;李v=暗缬啊?项目,指数):关键=爸甘盄click=皊electItem(项)”在
.......
& lt;/li>
之前
方法:{
selectItem(项){//console.log (item.moveId);//var=item.moveId项;
美元。排放(“选择”项);
}
3。在movieShow页面引用movieList.vue页面
& lt; movieList:电影="电影" @select=癿ovieDetail祝辞& lt;/movieList>
//转入电影详情页
movieDetail(项){
console.log (“$ {item.moveId}”);
美元。router.push ({
路径:/movieDetail/$ {item.moveId} '
}）
}
效果如下:
上面获取到了id,接下来实现详情页通过id获取数据
1)先获取传过来的id
var movieId=美元路线。参数,,route.params.movieId;美元。
2)引用豆瓣网的API
<代码>,/v2/电影/主题/:id>
const url=' api/电影/主题/$ {movieId} ';
美元。axios.get (url)
不要犹豫((res)=祝辞{
console.log (res.data);
})
效果如下
3)在页面中引用
& lt;滚动类=" movie-detail "
:数据=" https://www.yisu.com/zixun/movieDetail "
比;
。。。。。。
& lt;/scroll>
之前
在js中将movieDetail进行赋值,,movieDetail=res.data
数据(){
返回{
movieDetail: {}
}
}，
创建(){
this._getDateil ();
}，
组件:{
滚动
}，
方法:{
_getDateil () {
var=这个;
var movieId=美元路线。参数,,,route.params.movieId美元;
console.log (movieId);//that.getMovieDetail (movieId);
const url=' api/电影/主题/$ {movieId} ';
美元。axios.get (url)
不要犹豫((res)=祝辞{
console.log (res.data);
movieDetail=res.data;
}）
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
