vue 列表頁(yè)跳轉(zhuǎn)詳情頁(yè)獲取id以及詳情頁(yè)通過(guò)id獲取數(shù)據(jù)
更新時(shí)間：2019年03月27日 14:48:42 作者：荔枝吖
這篇文章主要介紹了vue 列表頁(yè)跳轉(zhuǎn)詳情頁(yè)獲取id以及詳情頁(yè)通過(guò)id獲取數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1.先在router.js中配置路由
{
path: '/movieDetail/:movieId',
name: 'movieDetail',
component:movieDetail
}
2.獲取詳情頁(yè)的id,并派發(fā)父組件事件（movieList.vue)頁(yè)面
<li v-for="(item,index) in movies" :key="index" @click="selectItem(item)"> 。。。。。。。 </li>
methods:{
selectItem(item){
//console.log(item.moveId);
//var item = item.moveId;
this.$emit('select',item);
}
3.在movieShow頁(yè)面引用movieList.vue頁(yè)面
<movieList :movies="movies" @select="movieDetail"></movieList>
//轉(zhuǎn)入電影詳情頁(yè)
movieDetail(item){
console.log(`${item.moveId}`);
this.$router.push({
path: `/movieDetail/${item.moveId}`
})
}
效果如下：
上面獲取到了 id，接下來(lái)實(shí)現(xiàn)詳情頁(yè)通過(guò)id獲取數(shù)據(jù)
1)先獲取傳過(guò)來(lái)的id
var movieId = that.$route.params && that.$route.params.movieId;
2)引用豆瓣網(wǎng)的API
/v2/movie/subject/:id 單個(gè)電影條目信息
const url = `api/movie/subject/${movieId}`;
that.$axios.get(url)
.then((res)=>{
console.log(res.data);
})
效果如下
3）在頁(yè)面中引用
<scroll class="movie-detail"
:data="movieDetail"
>
。。。。。。
</scroll>
在js中將movieDetail進(jìn)行賦值 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;
})
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中強(qiáng)制組件重新渲染的正確方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?
前幾天在vue運(yùn)行項(xiàng)目過(guò)程中報(bào)錯(cuò)了,所以下面這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?function的解決方法,需要的朋友可以參考下2022-07-07
本文主要介紹了elementUI組件el-dropdown的一些坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue+axios 攔截器實(shí)現(xiàn)統(tǒng)一token的案例
這篇文章主要介紹了vue+axios 攔截器實(shí)現(xiàn)統(tǒng)一token的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
公司最近有這么個(gè)需求,在線預(yù)覽pdf功能,正好有點(diǎn)時(shí)間,稍微整理記錄一下,這篇文章主要給大家介紹了關(guān)于前端預(yù)覽pdf文件流的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue的列表之渲染,排序,過(guò)濾，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
一篇文章帶你了解vue.js的事件循環(huán)機(jī)制
這篇文章主要為大家詳細(xì)介紹了vue.js事件循環(huán)機(jī)制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
Vue中的watch是什么以及watch和computed的區(qū)別
這篇文章主要介紹了Vue中的watch是什么以及watch和computed的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09