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

vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据
2018年12月17日 20:19:00 荔枝吖 阅读数：1644
 

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}`
             })
          }

4.上面获取到了 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);
      })

5.在页面中引用

     <scroll class="movie-detail"
                   :data="movieDetail"
           >
     
           。。。。。。
     
    </scroll>
    
6.在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;
            })
          },

转载自：https://blog.csdn.net/weixin_43650973/article/details/85055406