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