uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）

uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）

​

通过uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）

起始页跳转到对应页面，并传递参数（object），如下图所示：

<template>
  <div>
    <div class="item" v-for="(item,index) in className" :key="index" @click="nextPage(item)">
      <div class="label">{{item.name}}</div>
      <div class="right-icon"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        className:[{
          type:1,
          name: '实体课'
        },{
          type:2,
          name: '讲座'
        }, {
          type: 3,
          name: '辅导课'
        }, {
          type: 4,
          name: '培训课'
        }, {
          type: 5,
          name: '录播课'
        }]
      }
    },
    methods: {
      nextPage(type) {
        uni.navigateTo({
          url: 'lesson-time?type=' + JSON.stringify(type)//将传递的对象转化成字符串
        })
      }
    }
  }
</script>
      

对应页面接收参数，如下图所示：

v-for和v-if不建议一起使用！！！

<template>
  <div class="container">

    <div class="teacher-info">
      <scroll-view scroll-y @scrolltolower="scrolltolower" class="teacher-info-scrool">
        <!-- 实体课 -->
        <div class="teacher-info-box" v-for="(item,index) in lessonList1" :key="index.id" v-if="newpage == 1">
          <div class="teacher-info-box1">
            <div>{{item.name}}</div>
            <div>{{item.phone}}</div>
          </div>
          <div class="teacher-info-box2">
            <div class="info-box box1">{{item.title}} <span class="info-time">{{item.times}}</span></div>
            <div class="info-box info-box-btn">讲师：{{item.teacher}}
              <span class="detail-btn" @click="nextPage1(item)">详情</span>
            </div>
            <div class="info-box">校区：{{item.campus}}</div>
            <div class="info-box">课程：{{item.class}}</div>
            <div class="info-box">实际上课人数：{{item.real_num}}人</div>
            <div class="info-box">上课时间：{{item.date}} <span class="info-time">
                {{item.datetime}}</span></div>
          </div>
          <div class="teacher-info-box3"
            :class="item.state == 2 ? ' wait' : item.state == 3 ? ' refuse' : ''">
            {{stateFliter(item.state)}}
          </div>
        </div>

      </scroll-view>
    </div>
  </div>
</template>

<script>
  export default {

    data() {
      return {      
        newpage: '',
        lessonList1: [{
          name:'xxxxx',
          phone: '18297955237',
          title: '非钻石班、医学特招班班种',
          times: '2021-06-01 12:20',
          teacher: '汪伟',
          campus: '徽商校区',
          class: '公共语文',
          real_num: '1250',
          date: '2021-06-01 ',
          datetime: ' 08：00~11：00'
        }]
      }
    },

    onLoad(options) {
      console.log(JSON.parse(options.type));
      this.newpage = JSON.parse(options.type).type;
      uni.setNavigationBarTitle({
        title: JSON.parse(options.type).name
      });
    }
      

所有关键代码如上，可根据需求自行修改