uni-app HBX3.4.7 vue3 h5 当整个项目只有1个首页时,在首页跳首页会报错

uni-app HBX3.4.7 vue3 h5 当整个项目只有1个首页时,在首页跳首页会报错

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

示例代码:

<template>  
    <view>  
        <button @click="navigateTo">跳自身页面navigateTo</button>  
        <button @click="redirectTo">跳自身页面redirectTo</button>  
        <button @click="reLaunch">跳自身页面reLaunch</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            navigateTo(){  
                let random = Math.random();  
                uni.navigateTo({  
                    url:`/pages/index/index?random=${random}`  
                })  
            },  
            redirectTo(){  
                let random = Math.random();  
                uni.redirectTo({  
                    url:`/pages/index/index?random=${random}`  
                })  
            },  
            reLaunch(){  
                let random = Math.random();  
                uni.reLaunch({  
                    url:`/pages/index/index?random=${random}`  
                })  
            }  
        }  
    }  
</script>  

操作步骤:

直接hbx新建uniapp空白项目,选vue3模式,整个项目只写1个首页页面,页面代码为 上面的代码示例,运行h5到浏览器

预期结果:

3种方式的跳转应该能正常跳转页面才对

实际结果:

无法跳转页面,会报错。

TypeError: Cannot read properties of undefined (reading 'push')
TypeError: Cannot read properties of undefined (reading 'replace')

bug描述:

当整个项目只有1个首页时,在首页跳首页会报错!


更多关于uni-app HBX3.4.7 vue3 h5 当整个项目只有1个首页时,在首页跳首页会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

为了优化包体积大小,当项目只有一个页面时,会认为该项目不需要路由管理,所以无法调用uni的路由API 如果确认只需要一个页面,且还需要uni的路由跳转,临时方案,可以再新建一个空页面,后续会优化此逻辑

更多关于uni-app HBX3.4.7 vue3 h5 当整个项目只有1个首页时,在首页跳首页会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的,不过当项目只有一个页面时,就算加载路由管理,包体积也加不了多少,所以我感觉没有必要去掉路由管理的API ,毕竟2个或以上页面时,路由API就会加载,因此没有必要单独为1个页面时,去掉路由管理。 因为1个页面时,也可能会页面跳自身页面的情况(为了让url变化)如果采用执行函数的方式修改页面内容,url不会变化,导致将页面url发给别人后,别人打开的和你本意想给客户看的url是不一致的。

在 uni-app 中,如果你在首页(pages/index/index)尝试跳转到同一个页面(即首页),可能会导致页面栈重复或页面生命周期问题,从而引发错误。这是因为 uni-app 的页面栈机制不允许重复跳转到同一个页面。

解决方案

  1. 避免跳转到当前页面
    在跳转之前,先判断当前页面是否是目标页面。如果是,则不执行跳转操作。

    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    if (currentPage.route !== 'pages/index/index') {
        uni.navigateTo({
            url: '/pages/index/index'
        });
    }
    
  2. 使用 uni.redirectTo 代替 uni.navigateTo
    如果你确实需要跳转到首页,可以使用 uni.redirectTo,它会关闭当前页面并跳转到目标页面,避免页面栈重复。

    uni.redirectTo({
        url: '/pages/index/index'
    });
    
  3. 使用 uni.reLaunch 重新启动应用
    如果你希望重新加载整个应用并跳转到首页,可以使用 uni.reLaunch

    uni.reLaunch({
        url: '/pages/index/index'
    });
    
  4. 检查页面生命周期
    确保在页面生命周期函数(如 onLoadonShow)中没有重复的逻辑或操作,避免因重复执行而引发错误。

示例代码

export default {
    methods: {
        navigateToHome() {
            const pages = getCurrentPages();
            const currentPage = pages[pages.length - 1];
            if (currentPage.route !== 'pages/index/index') {
                uni.navigateTo({
                    url: '/pages/index/index'
                });
            } else {
                console.log('已经在首页,无需跳转');
            }
        }
    }
}
回到顶部