...
import History from '@/lib/navigator/History'
const MAX_LEVEL = 10 // 小程序支持打開的頁面層數(shù)
export default class Navigator {
  // 中轉(zhuǎn)頁面路徑
  static curtainPage = '/pages/curtain/curtain/main'
  // 最大頁數(shù)
  static maxLevel = MAX_LEVEL
  // 邏輯棧
  static _history = new History({
    routes: [{ url: '' }],
    correctLevel: MAX_LEVEL - 2
  })
  
  ...
  
  /**
   * 打開新頁面
   * @param {Object} route 頁面配置，格式同wx.navigateTo
   */
  @makeMutex({ namespace: globalStore, mutexId: 'navigate' }) // 避免跳轉(zhuǎn)相關(guān)函數(shù)并發(fā)執(zhí)行
  static async navigateTo (route) {
    console.log('[Navigator] navigateTo:', route)
    // 更新邏輯棧
    Navigator._history.open({ url: route.url })

    let curPages = getCurrentPages()
    // 小于倒數(shù)第二層時(shí)，直接打開
    if (curPages.length < MAX_LEVEL - 1) {
      await Navigator._secretOpen(route) // 就是調(diào)用wx.navigateTo
    // 倒數(shù)第二層打開最后一層
    } else if (curPages.length === MAX_LEVEL - 1) {
      const url = URL.setParam(Navigator.curtainPage, { url: route.url })
      await Navigator._secretReplace({ url })  // wx.redirectTo 到中轉(zhuǎn)頁，再由中轉(zhuǎn)頁跳轉(zhuǎn)到第10層頁面
    // 已經(jīng)達(dá)到最大層數(shù)，直接最后一層重定向
    } else {
      await Navigator._secretReplace(route)    // wx.redirectTo 第10層頁面直接重定向
    }
  }
  
  /**
   * 完整歷史記錄
   * @return {Array}
   */
  static get history () {
    return Navigator._history.routes
  }
  
  /**
   * 更新路由
   * @param {Object} config 自定義配置，可配置項(xiàng)參見 _config 相關(guān)字段及注釋
   */
  static updateRoutes (routes = []) {
    this._history._routes = routes
  }
  
  ...
}
復(fù)制代碼

<template>
  <div class="main"></div>
</template>
<script>
import Navigator from '@/lib/navigate/Navigator'
// query參數(shù)
let opts = null
// 是否為返回操作
let isBack = false

export default {
  onLoad (options) {
    // 緩存參數(shù)
    opts = options
    // 執(zhí)行onLoad生命周期，認(rèn)為是跳轉(zhuǎn)或者重定向操作
    isBack = false
  },
  onShow () {
    // 跳轉(zhuǎn)、重定向操作時(shí)，邏輯棧的狀態(tài)會(huì)在跳轉(zhuǎn)函數(shù)里更新
    if (!isBack) {
      const url = decodeURIComponent(opts.url)
      // 再返回時(shí)認(rèn)為是返回操作
      isBack = true
      // 跳轉(zhuǎn)操作
      if (opts.type === 'navigateTo') {
        Navigator._secretOpen({ url })      // 相當(dāng)直接執(zhí)行wx.navigateTo,不會(huì)更新邏輯棧
      // 重定向
      } else if (opts.type === 'redirectTo') {
        Navigator._secretReplace({ url })   // 相當(dāng)直接執(zhí)行wx.redirectTo,不會(huì)更新邏輯棧
      }
    // 返回操作
    } else {
      // 獲取邏輯棧
      let routes = Navigator.history
      // 如果10層之外的返回，用navigateTo操作
      // 如果是10層返回到9層，用redirectTo操作
      const operation = (routes.length === Navigator.maxLevel) ? 'redirectTo' : 'navigateTo'
      // 獲取要返回的頁面路由
      let preRoute
      if (operation === 'navigateTo') {
        // 移除邏輯層中后兩個(gè)元素：
        // 移除最后一個(gè)是因?yàn)橐?
        // 移除倒數(shù)第二個(gè)是因?yàn)?，跳轉(zhuǎn)到倒數(shù)第二個(gè)頁面時(shí)會(huì)重新插入邏輯棧
        preRoute = routes.splice(routes.length - 2, 2)[0]
      } else {
        // 重定向時(shí)只移除最后一個(gè)元素
        preRoute = routes[routes.length - 2]
        routes.splice(routes.length - 1, 1)
      }
      // 更新邏輯棧
      Navigator.updateRoutes(routes)
      // 執(zhí)行自己包裝的跳轉(zhuǎn)、重定向方法，該操作會(huì)更新邏輯棧
      Navigator[operation](preRoute)
    }
  }
}
</script>
<style lang="scss">
  .main {
    background-color: $white-color;
  }
</style>
復(fù)制代碼