【愚公系列】2022年02月 微信小程序-页面栈和页面路由

文章目录

• 一、页面栈
  • 1.获取页面栈
  • 2.注意事项
  • 3.获取页面栈来刷新页面
• 二、页面路由
  • 1.Router
  • 2.路由的相对路径
  • 3.注意事项

一、页面栈

1.获取页面栈

方法：getCurrentPages()

获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。

2.注意事项

• 不要尝试修改页面栈，会导致路由以及页面状态错误。
• 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

3.获取页面栈来刷新页面

// 刷新上一个页面
__refreshBeforePage(){
  let beforePage = getCurrentPages().shift() //上一个页面实例对象，getCurrentPages()获取到当前页面栈
  if (beforePage == undefined || beforePage == null) return
  //只刷新上一个页面是pagea/my/my的页面
  if (beforePage.route == 'pages/my/my') {
    beforePage.onLoad()
  }
},
// 刷新下一个页面
__refreshNextPage(){
  let nextPage = getCurrentPages().pop() //下一个页面实例对象
  if (nextPage == undefined || nextPage == null) return
  nextPage.onLoad()
},

二、页面路由

1.Router

页面路由器对象。可以通过 this.pageRouter 或 this.router 获得当前页面或自定义组件的路由器对象。

2.路由的相对路径

页面路由器有 switchTab reLaunch redirectTo navigateTo navigateBack 五个方法，与 wx 对象向同名的五个方法 switchTab reLaunch redirectTo navigateTo navigateBack 功能相同；唯一的区别是，页面路由器中的方法调用时，相对路径永远相对于 this 指代的页面或自定义组件。

例如，对于下面这段示例代码：

// index/index.js
Page({
  wxNavAction: function () {
    wx.navigateTo({
      url: './new-page'
    })
  },
  routerNavAction: function () {
    this.pageRouter.navigateTo({
      url: './new-page'
    })
  }
})

页面 index/index 的 js 代码如上所示。如果此时已经跳转到了一个新页面 pack/index ，然后才调用到上面的 wxNavAction 方法，跳转的新页面路径将是 pack/new-page ；而如果调用的是 routerNavAction 方法，跳转的新页面路径仍然是 index/new-page 。

换而言之， this.pageRouter 获得的路由器对象具有更好的基路径稳定性。通常情况下，使用 this.pageRouter.navigateTo 代替 wx.navigateTo 是更优的。

3.注意事项

this.pageRouter 和 this.router 在页面中将获得同样的页面路由器对象。

但如果在自定义组件中调用， this.pageRouter 将相对于自定义组件所在的页面来进行路由跳转，而 this.router 相对于自定义组件自身的路径。