uniapp's Vue3.2 WeChat applet development: routing jump parameter transfer, page communication: modify the data of the previous page, monitor the data passed by the page rollback

Scenario: The e-commerce module of the small program recently made can modify the address when confirming the order. Clicking the default address will jump to the address management. After clicking the address in the address management, the page will roll back and return the selected address. Go to Address Management to modify the default address and return to confirm the order to display the new default address

1. Page jump --Pass parameters to allow clicking on the address in address management to return and pass parameters

const addressFn = () => {
    uni.navigateTo({
        url: "/pages/my/address/index?isBackAddress=true",
    })
}

Receive the parameters passed by the page jump

import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from "vue";
onLoad((options: any) => {
    isBackAddress.value = options.isBackAddress
});
const isBackAddress = ref<boolean>(false)

2. Click to return -- click on the list item to return to the previous page and pass the clicked item to the previous page through page communication

const adddressBackFn = (data: addressListType) => {
    if (!isBackAddress.value) return  //点击是否返回
    let pages = getCurrentPages(); // 当前页面
    let prevPage = pages[pages.length - 2]; // 上一页
    prevPage.$vm.refreshDefaultAddress = true //修改上一页面的值
    setTimeout(() => {
        uni.$emit('UpAddressData', data)//触发自定义事件，附加参数都会传给监听器回调函数
    }, 300)
    uni.navigateBack({//返回上一页面
        delta: 1
    })
}

3. Click the return button in the upper left corner to listen for return -- customize the navigation bar

// ui 
 <view class="box-bg">
        <uni-nav-bar :border="false" backgroundColor="#F4F5F7" left-icon="left" title="地址管理" @clickLeft="backFn" />
    </view>

//js 获取获取胶囊按钮的高度
const nav_topHeight = ref<string>(uni.getStorageSync('MenuButton').height + 'rpx')

const backFn = () => {
    let pages = getCurrentPages(); // 当前页面
    let prevPage = pages[pages.length - 2]; // 上一页
    if (prevPage.$vm.refreshDefaultAddress) {
        prevPage.$vm.refreshDefaultAddress = false
    }
    uni.navigateBack({//返回上一页面
        delta: 1
    })
}

//css 
.box-bg {
    margin-top: v-bind(nav_topHeight);
}

4. Determine whether the value has been modified. If it is modified, use the modified value to monitor

onShow(async () => {
    // 判断是否被修改
    if (refreshDefaultAddress.value) {
        uni.$off('UpAddressData')//先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
        //监听修改后传递过来的数据   
        uni.$once('UpAddressData', (data => {
            defaultAddress.value = data
        }))
    } else {
        // 请求默认地址
        const res = await RequesApi.AddRessApi({
            "DoType": "5",
            "LanguageType": "zh_Hans_CN"
        })
        defaultAddress.value = res.data.Data[0]
    }
})
const refreshDefaultAddress = ref<boolean>(false)
const defaultAddress = ref<addressListType>() //地址数据
defineExpose({ refreshDefaultAddress }) //把数据暴露出去