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