1.问题

首先微信小程序中页面栈最多十层，也就意味着如果使用wx.navigateTo（保留当前页面，跳转到应用内的某个页面）方法，最多也就开启十层页面，如果在继续往后开会提示报错

其次是微信小程序官方文档建议我们不要尝试修改页面栈，会导致路由以及页面状态错误。

2.分析

首先微信小程序的跳转方法有
1.wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
2.wx.navigateBack(Object object) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
3.wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
因为我们无法修改页面栈，所以这边的解决思路是自定义一个页面栈数组来记录，再通过封装上述微信小程序的跳转方法，实现十层以上的页面跳转

3.解决方法

1.自定义页面栈
在app.js中创建pageList数组，保存页面的url属性。

// app.js
App({onLaunch() {},globalData: {pageList: ['/pages/index/index']}
})

2.封装wx.navigateTo
首先是 navigateTo的跳转逻辑，根据当前小程序的Page是否超过最大数目限制。调用不同的API跳转到新的页面。
在这里插入图片描述
下面是代码实现

const MAX_PAGE_SIZE = 10function navigateTo(pageUrl) {// 如page列表已到达上限, 将页面push到app.pageList中, 当前页面redirectTo到新页面const pageSize = getCurrentPages().lengthconsole.log(pageSize)if (pageSize < MAX_PAGE_SIZE) {wx.navigateTo({url: pageUrl})} else {wx.redirectTo({url: pageUrl})}getApp().globalData.pageList.push(pageUrl)console.log(getApp().globalData.pageList)
}

3.封装wx.navigateBack
接下来实现 wx.navigateBack，同样先使用流程图厘清思路。当 getCurrentPage().lengtl小于自定义的 Page 栈长度时，说明小程序默认的页面数目已不够使用，因此需要跳转的上一页数据需要从自定义的 Page 中获取。
在这里插入图片描述
下面是代码实现

function navigateBack() {// 如果page stack中页面数小于app.pageList中数目 => 将app.pageList中页面pop出去, 当前页面redirect到pop出来的urlconsole.log(getCurrentPages().length)console.log(getApp().globalData.pageList.length)if (getCurrentPages().length < getApp().globalData.pageList.length) {const pageList = getApp().globalData.pageListpageList.pop()const url = pageList[pageList.length - 1]wx.redirectTo({url: url})} else {// 如果两个数目一致, app.pageList pop, 当前页面navigateBackgetApp().globalData.pageList.pop();wx.navigateBack()}
}