The solution to the problem of passing parameters when the applet goes back to the previous page (uni.navigateBack of uniapp)

This article is about the basics of small programs, Xiaobai can read it. In the development of small programs, uni.navigateBack or wx.navigateBack will be used to return to the previous page, but how does this routing method implement value passing? Here is the implementation method, you can take a look if you are interested.

Features:

This is a function I wrote a small program in the company. For example, there is a card on page A that allows us to jump to page B to select data, and then return to page A to see the data we have selected. This is not difficult. Only the implementation function code can be recorded.

Implementation:

Idea: Call the getCurrentPages function in the callback method of the rollback page, and then change the data of the previous page by obtaining the page stack. There are two ways to implement this getCurrentPages function, one is to directly change the parameters of the original page (A page), and the other is to change the page parameters by calling the method of the original page (A page).

Rollback page (B page) method code:

const pages = getCurrentPages() // 获取所有页面栈实例列表
const prevPage = pages[pages.length - 2] // 上一页面的数据
console.log("获取所有页面栈实例列表：", pages)
console.log("这是上一页面的数据：", prevPage)

// 直接改变上一页面的数值
prevPage.$vm.title = e.title     // e是需要传递的数据

// 通过调用上一页的方法实现
prevPage.$vm.getNavigateBack(e)    // e是需要传递的数据

// 返回上一页
uni.navigateBack({
    delta: 2
});

The original page (A page) method:

// 上一页面调用此方法
getNavigateBack(e) {
    // 对得到的数据处理
    console.log("这是回退页传递的数据--", e)
}

This is an implementation method, and if there are other implementation methods, we can discuss it together.