天天看點

#yyds幹貨盤點#【愚公系列】2022年10月 微信小程式-頁面棧和頁面路由一、頁面棧二、頁面路由

一、頁面棧

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 。

3.注意事項

繼續閱讀