#### 1. 問題描述 --- 當(dāng)前有三個(gè)頁(yè)面: 個(gè)人中心(pages/user/index)、個(gè)人信息(pages/user/info)、修改姓名(pages/user/name) 正確邏輯: 修改姓名的操作步驟是在個(gè)人中心點(diǎn)擊 **設(shè)置** 的圖標(biāo),進(jìn)入個(gè)人信息頁(yè)面,在個(gè)人信息頁(yè)面點(diǎn)擊姓名進(jìn)入修改姓名的頁(yè)面,點(diǎn)擊保存或左上角的返回鍵回到個(gè)人信息頁(yè)面,并且顯示最新的姓名。三個(gè)頁(yè)面及操作步驟如下所示: ![](https://img.itqaq.com/art/content/60da83c51407916cc8185355668fde4f.png) ``` 個(gè)人中心 -> 個(gè)人信息 -> 修改姓名 ``` uniapp 的路由跳轉(zhuǎn) API : + uni.navigateTo() 保留當(dāng)前頁(yè),跳轉(zhuǎn)到非 tabBar 頁(yè) + uni.redirectTo() 關(guān)閉當(dāng)前頁(yè),跳轉(zhuǎn)到非 tabBar 頁(yè) + uni.reLaunch() 關(guān)閉所有頁(yè)面,打開到應(yīng)用內(nèi)的某個(gè)頁(yè)面 + uni.navigateBack() 關(guān)閉當(dāng)前頁(yè),返回上一頁(yè)面或多級(jí)頁(yè)面 更多路由跳轉(zhuǎn) API 查看官方文檔: [https://uniapp.dcloud.net.cn/api/router.html](https://uniapp.dcloud.net.cn/api/router.html) 起初因?yàn)?uniapp 的路由跳轉(zhuǎn) API 有好多種,對(duì)他們不太熟悉,不知道使用哪個(gè)好,后面導(dǎo)致頁(yè)面跳轉(zhuǎn)存在問題 方案 1: 起初我只考慮修改了姓名的情況,未考慮進(jìn)入修改姓名頁(yè)面但并沒有修改姓名,然后通過返回鍵返回個(gè)人信息頁(yè)。這種跳轉(zhuǎn)方式用法在修改姓名的情況下是沒有問題的,但如果沒有修改姓名,點(diǎn)擊了修改姓名頁(yè)的返回鍵將直接回到個(gè)人中心頁(yè),而不是個(gè)人信息頁(yè),因?yàn)閭€(gè)人信息頁(yè)到修改姓名頁(yè)時(shí)使用的 uni.redirectTo() ``` 個(gè)人中心 -> 個(gè)人信息: uni.navigateTo() 個(gè)人信息 -> 修改姓名: uni.redirectTo() 修改姓名 -> 個(gè)人信息: uni.redirectTo() ``` 方案 2: 進(jìn)入修改姓名頁(yè),點(diǎn)擊返回鍵回到個(gè)人信息頁(yè),那么個(gè)人信息頁(yè)跳轉(zhuǎn)到修改姓名頁(yè)必須使用 uni.navigateTo() : ``` 個(gè)人中心 -> 個(gè)人信息: uni.navigateTo() 個(gè)人信息 -> 修改姓名: uni.navigateTo() ``` 要想滿足我們的功能需求,只需在方案 2 的基礎(chǔ)上兼容修改姓名時(shí)頁(yè)面操作流程也正確就可以了,通過查找資料和請(qǐng)教同事得知可以返回上一級(jí)頁(yè)面并調(diào)用上一級(jí)頁(yè)面中的方法,這種寫法正好解決了我的問題 ```javascript // 當(dāng)前頁(yè)面棧的實(shí)例 let pages = getCurrentPages() // 上一個(gè)頁(yè)面實(shí)例對(duì)象 let beforePage = pages[pages.length - 2] // 觸發(fā)上一個(gè)頁(yè)面中的 getUserInfo 方法 beforePage.$vm.getUserInfo() // 返回上一個(gè)頁(yè)面 uni.navigateBack() ``` #### 2. 解決方案 --- 三個(gè)頁(yè)面之間的跳轉(zhuǎn)方式 ``` 個(gè)人中心 -> 個(gè)人信息: uni.navigateTo() 個(gè)人信息 -> 修改姓名: uni.navigateTo() 修改姓名 -> 個(gè)人信息: uni.navigateBack() ``` 當(dāng)姓名修改成功后彈出消息提示,然后調(diào)用個(gè)人信息頁(yè)的 getUserInfo 方法重新獲取姓名,最后返回到個(gè)人信息頁(yè)即可 ```javascript uni.showToast({ title: '修改成功', duration: 1500 }) setTimeout(() => { // 當(dāng)前頁(yè)面棧的實(shí)例 let pages = getCurrentPages() // 上一個(gè)頁(yè)面實(shí)例對(duì)象 let beforePage = pages[pages.length - 2] // 觸發(fā)上一個(gè)頁(yè)面中的 getUserInfo 方法 beforePage.$vm.getUserInfo() // 返回上一個(gè)頁(yè)面 uni.navigateBack() }, 1500); ```