uni-app - uni.navigateBack 返回后更新上一页数据（uni.navigateBack 返回页面携带参数）

清疚 2022-10-27 06:24 258阅读 0赞

## 效果图 ##

![在这里插入图片描述][20210203215132474.gif]

## 前言 ##

> **假设需求**：从 `A` 页面跳转到 `B` 页面，当从 `B` 页面使用 `uni.navigateBack` 返回 `A` 页面后，改变 `A` 页面上的数据。

假如，我们现在有如下两个页面，用以实现如上需求。  
![在这里插入图片描述][20210203213647346.png]

## A.vue ##

<template>
    	<view>
    		<button @click="toPage()">{
       { title }}</button>
    		<view>{
       { title }}</view>
    	</view>
    </template>
    
    <script> export default { data() { return { // 用于测试改变的数据 title: '跳转页面' } }, methods: { /* * 跳转到 B.vue * @return void */ toPage: function() { uni.navigateTo({ url: '/pages/index/B' }) }, /* * 监听上一页发送的更新指令 * @param {String} msg - 新值 * @return void */ upData: function(msg) { this.title = msg this.$forceUpdate() } } } </script>
    
    <style></style>

## B.vue ##

<template>
    	<view>
    		<button @click="backPage()">返回上一页</button>
    	</view>
    </template>
    
    <script> export default { data() { return { } }, methods: { /* * 返回上一页 * @return void */ backPage: function() { // 告知 A.vue 更新数据 // 获取页面栈 let pages = getCurrentPages() // 获取上一页栈 let prevPage = pages[ pages.length - 2 ] // 触发上一页 upData 函数(并携带参数) prevPage.$vm.upData('我现在更新啦~') // 返回上一页 uni.navigateBack({ delta: 1 }) } } } </script>
    
    <style></style>

[20210203215132474.gif]: /images/20221024/891df297adbe4c6a86197f8c505c62c8.png
[20210203213647346.png]: /images/20221024/dbd2dd23458f46e099173cb77476b938.png