微信小程序——页面路由

官方文档： https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

API： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

文章目录

页面栈页面栈的表现页面间传参页面返回

页面栈

普通的网页在页面跳转时，页面会被刷新；而对于单页面应用，不同页面间的跳转不刷新页面。

小程序的跳转，是不同的机制，采用的是页面栈。

队列可以理解为两头开放的管道；栈则是一头开放一头封死的管道。所以队列是先进先出，而栈是先进后出。

所以在小程序里，不是简单的跳转，不要一直打开新页面，而是使用给定的API管理好页面栈。

页面栈的表现

方式触发时机页面栈表现初始化小程序打开的第一个页面新页面入栈打开新页面调用APIwx.navigateTo或使用组件<navigator open-type="navigateTo"/>同上页面重定向调用APIwx.redirectTo或使用组件<navigator open-type="redirectTo"/>当前页面出栈，新页面入栈页面返回调用APIwx.navigateBack或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮页面不断出栈，直到目标返回页Tab 切换调用APIwx.switchTab或使用组件<navigator open-type="switchTab"/>或用户切换Tab页面全部出栈，只留下新的 Tab 页面重加载调用APIwx.reLaunch或使用组件<navigator open-type="reLaunch"/>页面全部出栈，只留下新的页面

注意事项:

使用页面返回到没页面，该页面只会触发onShow，而不会进入onLoadnavigateTo和redirectTo只能打开非tabBar页面；switchTab只能打开tabBar页面reLaunch可以打开任意页面

页面间传参

调用页面路由带的参数可以在目标页面的onLoad中获取。可传多个参数。

参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。如下：

wx.navigateTo({ url: '/pages/test/test?id=1&name=a' }); //test.js Page({ onLoad: function(option){ console.log(option) //{id: "1", name: "a"} } })

页面返回

可通过getCurrentPages()获取当前的页面栈，决定需要返回几层。

使用参数delta，定义返回的页面数，如果delta大于现有页面数，则返回到首页。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码 // 此处是A页面 wx.navigateTo({ url: 'B?id=1' }) // 此处是B页面 wx.navigateTo({ url: 'C?id=1' }) // 在C页面内 navigateBack，将返回A页面 wx.navigateBack({ delta: 2 })