通過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
});
}
所有關鍵程式碼如上，可根據需求自行修改