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

小程序文档里跳转路径的方法都有介绍,这里就不细说了!讲一下业务背景吧!随着项目越来越大,页面的跳转也越来越多,使用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.

### 微信小程序页面跳转方法详解 在微信小程序开发中,页面跳转是一个核心功能,它允许开发者在应用的不同页面间进行导航。以下是几种常见的页面跳转方式及其使用说明。 #### 使用 `navigator` 组件 `navigator` 是一种声明式的页面跳转方式,适用于简单的页面跳转场景。通过配置其属性可以轻松实现页面间的切换[^1]。 ```html <navigator url="/pages/targetPage/targetPage" open-type="navigate">跳转到目标页</navigator> ``` 上述代码片段展示了如何利用 `navigator` 组件来创建一个链接按钮,点击该按钮即可跳转至指定的目标页面 `/pages/targetPage/targetPage`。 #### 调用 API 方法 `wx.navigateTo` 对于更复杂的逻辑控制下的页面跳转,可以通过调用微信提供的 JavaScript 接口 `wx.navigateTo` 来完成。此方法不会关闭当前页面而是新增打开一页。 ```javascript wx.navigateTo({ url: '/pages/targetPage/targetPage', }); ``` 这里需要注意的是,`url` 参数应指向已注册的小程序页面路径,并且整个栈内的页面数量有限制最多十层),超出则会抛出错误提示。 #### 利用 `wx.redirectTo` 替代原有页面 如果希望新页面完全取代旧页面,则可选用 `wx.redirectTo` 函数。这种方式下原页面会被销毁不再保留于历史记录之中。 ```javascript wx.redirectTo({ url: '/pages/newTargetPage/newTargetPage', }); ``` 以上便是关于微信小程序内主要的三种页面跳转手段介绍以及对应的实际编码例子展示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值