>[success] # 頁面跳轉 1. 界面的跳轉有兩種方式：**通過navigator組件**（在app.json 文件的[tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar)屬性） 和 **通過wx的API跳轉** | API | 說明 | | --- | --- | --- | | [wx.switchTab](https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html) | 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面 | | [wx.reLaunch](https://developers.weixin.qq.com/miniprogram/dev/api/wx.reLaunch.html) | 關閉所有頁面，打開到應用內的某個頁面 | | [wx.redirectTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.redirectTo.html) | 關閉當前頁面，跳轉到應用內的某個頁面 | | [wx.navigateTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html) | 保留當前頁面，跳轉到應用內的某個頁面 | | [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBack.html) | 關閉當前頁面，返回上一頁面或多級頁面 | >[info] ## navigateTo 1. `wx.navigateTo(Object object)`,**保留當前頁面，跳轉到應用內的某個頁面**；**不能跳到 tabbar 頁面**（也就是在`app.json`）配置的路由 >[danger] ##### 案例 ~~~ Page({ /** * 頁面的初始數據 */ data: { name:"w", age:18 }, onNavigateTo(){ const name = this.data.name const age = this.data.age wx.navigateTo({ url: `/page2/index1/index?name=${name}&age=${age}`, }) } }) ~~~ * 在跳轉的頁面`onLoad`鉤子中獲取參數 ~~~ // page2/index1/index.js Page({ /** * 頁面的初始數據 */ data: { }, /** * 生命周期函數--監聽頁面加載 */ onLoad(options) { // 接受跳轉過來的參數 console.log(options) // {name: "w", age: "18"} }, }) ~~~ >[info] ## wx.navigateBack 1. `wx.navigateBack()`,用來回退上一次頁面 2. 可通過[getCurrentPages](https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html)獲取當前的頁面棧，決定需要返回幾層，拿到對應頁面的實例后直接給對應頁面賦值 3. 使用`this.getOpenerEventChannel` 去注冊傳遞的事件，然后用`event `去接收 >[danger] ##### 案例 ~~~ // page2/index1/index.js Page({ /** * 頁面的初始數據 */ data: { }, /** * 生命周期函數--監聽頁面加載 */ onLoad(options) { // 接受跳轉過來的參數 console.log(options) // {name: "w", age: "18"} }, goBack(){ wx.navigateBack() // 方式一: 給上一級的頁面傳遞數據 // 2.1. 獲取到上一個頁面的實例 const pages = getCurrentPages() const prePage = pages[pages.length-2] console.log(prePage) // 2.2.通過setData給上一個頁面設置數據 prePage.setData({ message: "呵呵呵" }) } }) ~~~ >[danger] ##### 案例二 * 先注注冊event 事件 ~~~ Page({ /** * 頁面的初始數據 */ data: { name:"w", age:18 }, onNavigateTo(){ const name = this.data.name const age = this.data.age wx.navigateTo({ url: `/page2/index1/index?name=${name}&age=${age}`, events: { // 注冊事件 backEvent(data) { console.log("back:", data); }, } }) } }) ~~~ * 等點擊回退的時候 觸發剛才注冊事件，形成后臺觸發也能傳遞值 ~~~ // page2/index1/index.js Page({ /** * 頁面的初始數據 */ data: { }, /** * 生命周期函數--監聽頁面加載 */ onLoad(options) { // 接受跳轉過來的參數 console.log(options) // {name: "w", age: "18"} }, goBack(){ wx.navigateBack() // 方式一: 給上一級的頁面傳遞數據 // 2.1. 獲取到上一個頁面的實例 const pages = getCurrentPages() const prePage = pages[pages.length-2] console.log(prePage) // 2.2.通過setData給上一個頁面設置數據 prePage.setData({ message: "呵呵呵" }) //2.3. 注冊emit const eventChannel = this.getOpenerEventChannel() eventChannel.emit("backEvent", { name: "back", age: 111 }) } }) ~~~