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
为了优化包体积大小,当项目只有一个页面时,会认为该项目不需要路由管理,所以无法调用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 的页面栈机制不允许重复跳转到同一个页面。
解决方案
-
避免跳转到当前页面
在跳转之前,先判断当前页面是否是目标页面。如果是,则不执行跳转操作。const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; if (currentPage.route !== 'pages/index/index') { uni.navigateTo({ url: '/pages/index/index' }); }
-
使用
uni.redirectTo
代替uni.navigateTo
如果你确实需要跳转到首页,可以使用uni.redirectTo
,它会关闭当前页面并跳转到目标页面,避免页面栈重复。uni.redirectTo({ url: '/pages/index/index' });
-
使用
uni.reLaunch
重新启动应用
如果你希望重新加载整个应用并跳转到首页,可以使用uni.reLaunch
。uni.reLaunch({ url: '/pages/index/index' });
-
检查页面生命周期
确保在页面生命周期函数(如onLoad
、onShow
)中没有重复的逻辑或操作,避免因重复执行而引发错误。
示例代码
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('已经在首页,无需跳转');
}
}
}
}