uni-app 小程序返回上一页并传递参数

1、需求描述

        从A页面跳转B页面填写车牌号码信息，填写好之后返回A页面时将填写的车牌号码传到A页面。

        A页面核心代码：

<template>
    <view class="container">
        <view class="row">
            <view class="operate-item" v-for="(item, index) in carNos" :key="index" 
                @click="handleEditCar(item, index)">
                <view class="label">{{ item }}</view>
                <uni-icons type="minus" @click.native.stop="handleDeleteCar(index)"></uni-icons>
            </view>
            <view class="operate-item">
                <view class="label">新增车辆</view>
                <uni-icons type="plusempty" @click="handleAddCar"></uni-icons>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        name: 'order',
        data() {
            return {
                carNos: [],         // 车牌号码列表
                currentCarIndex: 0, // 当前操作车牌索引
            }
        },
        methods: {
            // 编辑车辆
            handleEditCar(data, index) {
                this.currentCarIndex = index;
                uni.navigateTo({
                    url: "./car?plateNumber=" + data
                })
            },
            // 新增车辆
            handleAddCar() {
                uni.navigateTo({
                    url: "./car"
                })
            }
        }
    }
</script>

2、解决方法

（1）方法一：

        使用getCurrentPages获取上一页面路由，然后使用redirectTo进行重定向，将参数放到路由中传递。

        缺点：重新打开上一页面，会丢失上一页面本来填好的一些数据获取，不推荐使用。

// B.vue
handleSave() {
    let pages = getCurrentPages();
    let beforePage = pages[pages.length - 2];
    uni.redirectTo({
        url:'/'+beforePage.route + "?plate=" + plate
    })
}

（2）方法二：

        使用getCurrentPages获取上一页面路由，直接调用上一个页面对象的setData()方法，把数据存到上一个页面中去。

// B.vue
handleSave() {
    let pages = getCurrentPages();
    let prevPage = pages[pages.length - 2];
    let prevCarNos = prevPage.$vm.carNos;  // 获取A页面的carNos数据
    // 直接修改A页面的carNos数据
    if(this.params.plateNumber) { // 编辑车牌号码
        prevCarNos[this.params.currentCarIndex * 1] = plate;
    } else {  // 新增车牌号码
        prevCarNos.push(plate);
    }
    prevPage.setData({
        carNos: prevCarNos
    })
    uni.navigateBack({
        delta: 1
    })
}

        A页面中的编辑车辆方法有点变化：

// 编辑车辆
handleEditCar(data, index) {
    this.currentCarIndex = index;
    uni.navigateTo({
        url: "./car?plateNumber=" + data + "&currentCarIndex=" + index
    })
}

（3）方法三：

        使用uni.$emit()传值，使用uni.$on()接收，但是会出现一个问题，就是uni.$on()随着点击次数的增加，以后会触发多次，改成uni.$once()，便会解决此问题。

        还有一个问题就是在onshow里面放置触发$on或者$once，当打开的二级页面未触发监听时，监听仍然存在。如果你一直在打开页面而未触发监听，就会在触发的那一次把之前未触发的监听全部触发，导致你接收到了多次值。解决方法就是在uni.$once() 前面先移除一次uni.$off()。

// B.vue
handleSave() {
    uni.$emit('updateCar', {
        type: this.params.plateNumber ? 'editCar' : 'addCar',
        plate: plate
    });
    uni.navigateBack({
        delta: 1
    })
}

// A.vue
onShow() {
    // 移除全局自定义事件监听器
    uni.$off('updateCar');
    // 监听全局的自定义事件
    uni.$once('updateCar', data => {
        if(data.type === "addCar") {
            this.carNos.push(data.plate);
        } else {
            this.$set(this.carNos, this.currentCarIndex, data.plate);
        }
    })
}