uni-app跳转到详情页方法及详情页数据接收

思路：

给列表项加上点击方法，并且传递id参数

使用路由API由uni.navigateTo, 保留当前页面，跳转到应用内的某个页面

文章详情页接收id，并且传递给后端去查询改id详情数据

1、保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

给列表加上点击方法，并且传递id参数 @click="play(item.id)"

<template>
<view>
         <view v-for="(item) in homeData.tv" @click="play(item.id)">
                   <view>
                            <image :src="item.vod_pic" mode=""></image>
                            <view>{{item.vod_continu}}</view>
                   </view>
                   <view>{{item.vod_name}}</view>
                   <view>{{item.vod_content}}</view>
         </view>
</view>
</template>

2、跳转到文章详情页

点击跳转到play /play.vue详情页，使用跳转uni.navigateTo(OBJECT) 接口

uni.navigateTo({
url: '../play/play?id='+id
})

<script>
         export default {
                   data() {
                            return {
                                     homeData: []
                            }
                   },
                   onLoad() {
                     this.getVod()
                   },
                   methods: {
                            // 详情页
                            play(id){
                                     uni.navigateTo({
                                               url: '../play/play?id='+id
                                     })
                            }
                   }
         }
</script>

3、文章详情页接收id，并且传递给后端去查询改id详情数据

<script>
         export default {
                   data() {
                            return {
                                     id: '' //定义id参数，默认为空
                            }
                   },
                   onLoad(option) {
                            this.id = option.id
                   },
                   methods: {
                            async getDetail(id){
                                     var that =this
                                     const res = await this.$myRequest({
                                               url: '/api/Uniapp/getdetail?id='+id+'&p='+that.p
                                     })
                                     that.detail = res.data.data
                                     uni.setNavigationBarTitle({
                                         title:  res.data.data.vod_name
                                     });
                            }
                   }
         }
</script>