uni-app H5里两个页面连续跳转时 getCurrentPages内容不会变

uni-app H5里两个页面连续跳转时 getCurrentPages内容不会变

开发环境 版本号 项目创建方式
Windows win7 HBuilderX

产品分类：uniapp/H5

示例代码：

第一个页面的代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{ title }}</text>  
        </view>  
        <view>上一个页面title: {{ lastPageTitle }}</view>  

        <navigator url="../next/next"><button>下一页</button></navigator>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: 'Hello',  
            lastPageTitle: ''  
        };  
    },  
    onLoad() {  
        var pages = getCurrentPages();  
        var currPage = pages[pages.length - 1]; //当前页面  
        var prevPage = pages[pages.length - 2]; //上一个页面  
        if (prevPage) {  
            console.log(prevPage.$vm.title, "index")   
            this.lastPageTitle = prevPage.title;  

            prevPage.$vm.test()  
        } else {  
            this.lastPageTitle = '没有上一页';  
        }  
    },  
    methods: {  
        test(){  
            console.log("hello test--index")  
        }  
    }  
};  
</script>

第二个页面的代码：

<template>  
    <view>  
        <view>上一个页面title: {{ lastPageTitle }}</view>  
        <navigator url="../index/index"><button>去首页</button></navigator>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: '下一页',  
            lastPageTitle: ''  
        };  
    },  
    onLoad() {  
        var pages = getCurrentPages();  
        var currPage = pages[pages.length - 1]; //当前页面  
        var prevPage = pages[pages.length - 2]; //上一个页面  
        if (prevPage) {  
            console.log(prevPage.$vm.title, 'next'); //app  
            this.lastPageTitle = prevPage.title; //h5  

            prevPage.$vm.test();  
        } else {  
            this.lastPageTitle = '没有上一页';  
        }  
    },  
    methods: {  
        test() {  
            console.log('hello test--next');  
        }  
    }  
};  
</script>

操作步骤：

具体看demo包

预期结果：

在H5平台正常

实际结果：

H5平台异常

bug描述：

H5里两个页面连续跳转时，getCurrentPages内容不会变化，一直为第二个页面的信息。

在APP和微信小程序里是正常的！！！只有H5平台异常

两个页面来回切换，在APP上面是这样：

19:58:17.468 下一页, index at pages/index/index.vue:26
19:58:17.487 hello test--next at pages/next/next.vue:32
19:58:18.729 Hello, next at pages/next/next.vue:22
19:58:18.749 hello test--index at pages/index/index.vue:36
...

而H5上面是这个效果：

Hello next
index.vue:36 hello test--index
next.vue:22 下一页 next
next.vue:32 hello test--next
next.vue:22 下一页 next
next.vue:32 hello test--next
...

更多关于uni-app H5里两个页面连续跳转时 getCurrentPages内容不会变的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app H5里两个页面连续跳转时 getCurrentPages内容不会变的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app H5平台路由管理问题。在H5环境中，页面栈的更新机制与其他平台存在差异。

问题分析：

  1. H5平台使用浏览器history API管理路由，页面跳转时页面栈更新存在延迟
  2. 连续快速跳转时，getCurrentPages()可能无法及时反映最新的页面栈状态
  3. 在APP和小程序平台，路由由原生容器管理，页面栈更新是同步的

解决方案：

  1. 使用onShow生命周期替代onLoad
onShow() {
    setTimeout(() => {
        const pages = getCurrentPages()
        // 处理页面栈逻辑
    }, 0)
}
  1. 通过路由参数传递数据
// 跳转时传递数据
uni.navigateTo({
    url: '../next/next?prevTitle=' + this.title
})

// 目标页面接收
onLoad(options) {
    this.lastPageTitle = options.prevTitle || ''
}
  1. 使用Vuex进行状态管理
// store中维护页面历史
state: {
    pageHistory: []
}
回到顶部