>[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 }) } }) ~~~