1.先在router.js中配置路由
創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、成都網(wǎng)站建設(shè)、尋烏網(wǎng)絡(luò)推廣、成都微信小程序、尋烏網(wǎng)絡(luò)營銷、尋烏企業(yè)策劃、尋烏品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供尋烏建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
重慶分公司
重慶分公司
{
path: '/movieDetail/:movieId',
name: 'movieDetail',
component:movieDetail
}2.獲取詳情頁的id,并派發(fā)父組件事件（movieList.vue)頁面
methods:{
selectItem(item){
//console.log(item.moveId);
//var item = item.moveId;
this.$emit('select',item);
}3.在movieShow頁面引用movieList.vue頁面
//轉(zhuǎn)入電影詳情頁
movieDetail(item){
console.log(`${item.moveId}`);
this.$router.push({
path: `/movieDetail/${item.moveId}`
})
}效果如下：
上面獲取到了 id，接下來實現(xiàn)詳情頁通過id獲取數(shù)據(jù)
1)先獲取傳過來的id
var movieId = that.$route.params && that.$route.params.movieId;
2)引用豆瓣網(wǎng)的API
/v2/movie/subject/:id 單個電影條目信息
const url = `api/movie/subject/${movieId}`;
that.$axios.get(url)
.then((res)=>{
console.log(res.data);
})效果如下
3）在頁面中引用
。。。。。。
在js中將movieDetail進行賦值 movieDetail = res.data
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;
})
},以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
