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

举报
愚公搬代码 发表于 2022/02/25 16:05:20 2022/02/25
【摘要】 一、页面栈 1.获取页面栈方法:getCurrentPages()获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。 2.注意事项不要尝试修改页面栈,会导致路由以及页面状态错误。不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。 3.获取页面栈来刷新页面// 刷新上一个页面__refreshBeforePage(){...

一、页面栈

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.pageRouterthis.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 相对于自定义组件自身的路径。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。