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

最新推荐文章于 2024-07-23 08:57:29 发布

荔枝吖

最新推荐文章于 2024-07-23 08:57:29 发布

阅读量2.7w

点赞数 13

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43650973/article/details/85055406

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

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;
        })
      },