uni-app中的路由传参以及页面返回刷新

一、前言

现在的应用，不是是web端还是小程序端，页面之间的跳转使用路由传参的方式还是非常多的。那么有以下问题：

• 小程序中的路由传参是怎么样的呢？
• 页面之中又是怎么接收参数的呢？
• 页面中哪些生命周期中可以接收到路由参数？

二、页面的生命周期

首先，我们先看一下uni-app中常见的页面生命周期有哪些：

uni-app中，我们最常用的生命包括onLoad、onShow、onHide、onUnload等；
当然，有时候我们也会搭配Vue的生命周期，如created、mounted、beforeDestroy、destroyed等

uni-app生命周期官方文档

三、小程序之路由传参

3.1 路由传参

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

3.2 页面中在onLoad中接收参数

// 在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

在上一节中我看可以看到，页面中接收参数都是在onLoad中，因为uni-app已经将路由参数给我们封装到onLoad的参数里面。

但是，如果我们想要在onShow中获取到页面参数改怎么办呢？因为onLoad只会执行一次，从下级页面返回时并不会触发，但很多时候返回页面是需要做数据请求或者其他操作的，有可能需要获取到页面的路由参数。

那么，具体应该怎么做呢：
需要用到 getCurrentPages() 函数用于获取当前页面栈的实例。 以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

// 获取当前小程序的页面栈
let pages = getCurrentPages();
// 数组中索引最大的页面--当前页面
let currentPage = pages[pages.length - 1];
// 打印出当前页面中的 options ==>> 当前页面上的属性和方法都可以获取到
console.log('====>>>>', currentPage.options)

四、页面的返回刷新功能

有时候，把数据请求全部写在onShow里面可能无法满足我们的实际需求，可能需要在页面返回的时候做一些判断，然后做一些特殊的操作。这样的需求可能就需要子页面与父页面的共同配合！

原理：也是通过 getCurrentPages() 函数获取父页面的实例，然后调用它自定义的方法即可！

• 子页面中

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; //上一个页面

 //navBackFun 需要在父级页面定义
prevPage.$vm.navBackFun({isSellBack: true});			// 调用上一个页面的自定义函数并传参
uni.navigateBack()

• 父页面中

// 在methods中定义一个方法
navBackFun(object){			// 下级页面调用 uni.navigateBack() 前调用
 	if(object.isSellBack){			// 传递过来的参数
 		// 根据实际需求做页面刷新，部分页面数据改变
 		// ...
 	}
},

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！