写点什么

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

作者:愚公搬代码
  • 2022-12-01
    福建
  • 本文字数:982 字

    阅读完需:约 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.pageRouterthis.router 获得当前页面或自定义组件的路由器对象。

2.路由的相对路径

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


例如,对于下面这段示例代码:


// index/index.jsPage({  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 相对于自定义组件自身的路径。

发布于: 刚刚阅读数: 6
用户头像

还未添加个人签名 2022-03-01 加入

该博客包括:.NET、Java、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、python、大数据等相关使用及进阶知识。查看博客过程中,如有任何问题,皆可随时沟通。

评论

发布
暂无评论
【愚公系列】2022年12月 微信小程序-页面栈和页面路由_12月月更_愚公搬代码_InfoQ写作社区