解决小程序页面路径最多只能十层限制

最新推荐文章于 2025-09-18 09:11:23 发布

转载最新推荐文章于 2025-09-18 09:11:23 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/6844903685818941453

文章标签：

#小程序 #微信小程序 #页面跳转十层限制 #页面跳转 #十层限制

微信小程序专栏收录该内容

20 篇文章

订阅专栏

本文探讨了小程序中页面跳转的限制与优化方法，当页面栈超过九层时，使用redirectTo或reLaunch替代navigateTo，避免跳转失败。通过getCurrentPages()方法监控页面栈长度，实现智能跳转。

小程序文档里跳转路径的方法都有介绍，这里就不细说了！讲一下业务背景吧！随着项目越来越大，页面的跳转也越来越多，使用navigateTo方法添加的页面栈也越来越多了，不知不觉可能就到了十层了再用navigateTo去跳转就跳不动了，这个时候需要redirectTo删除当前页面栈来跳转或者用reLaunch删除所有页面栈来跳转用那就要看业务场景了。可是什么时候到了十层了呢？这个时候关键的api getCurrentPages()来了！它返回的是一个数组，那么就可以获取它的length来做判断了！

// router.js
module.exports = {
    navigateTo(object) {
        if (getCurrentPages().length > 9) {
            this.redirectTo(object)
            // this.reLaunch(object)
        } else {
            wx.navigateTo(object)
        }
    },
    // 其他跳转不处理
    navigateBack(object) {
        wx.navigateBack(object)
    },
    switchTab(object) {
        wx.switchTab(object)
    },
    redirectTo(object) {
        wx.redirectTo(object)
    },
    reLaunch(object) {
        wx.reLaunch(object)
    },
}

// app.js
// 引入路径于实际为准
import router from './utils/router.js'
App({
    //....
    router,
    //...
})

// demo.js
const app = getApp()
Page({
    //...
    goto(){
        app.router.navigateTo({url:"/pages/index/index"})
     },
    //...
})

<!-- demo.wxml --> 
<view catchtap="goto">goto</view>

原来怎么跳还是怎么跳，只是把wx.改成app.router.