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

2019-11-19 11:56:09

字体：大中小

来源：转载

供稿：网友

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

{   path: '/movieDetail/:movieId',   name: 'movieDetail',   component:movieDetail }

2.获取详情页的id,并派发父组件事件（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>

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

效果如下：

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

1)先获取传过来的id

var movieId = that.$route.params && that.$route.params.movieId;

2)引用豆瓣网的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;    })   },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解Vue.directive 自定义指令

下一篇：js取0-9随机取4个数不重复的数字代码实例