uniapp页面跳转的几种方式

作者：鹏仔先生日期：2024-06-25 17:11:04浏览：3143分类：JavaScript

项目中，鹏仔偶尔使用uniapp开发，经常用到跳转页面方面代码，一直没有整理，本次抽个空，顺手整理一下自己写的，方便使用。

鹏仔平时是将如下代码放置公共的 mixins 中，然后直接调用即可，当然您可以自行将代码封装js引入调用。

// 页面跳转
goPage(type,val){
	if(type == '1'){
		// 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
		uni.navigateTo({url: val});
	}
	if(type == '2'){
		// 可以关闭当前界面并跳转到其他的非tabbar界面
		uni.redirectTo({url: val});
	}
	if(type == '3'){
		// 关闭所有页面，打开到应用内的某个页面
		uni.reLaunch({url: val});
	}
	if(type == '4'){
		// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
		uni.switchTab({url: val});
	}
	if(type == '5'){
		// 关闭当前页面，返回上一页面或多级页面（delta 返回页面层数）
		uni.navigateBack({url: val});
		// uni.navigateBack({
		// 	delta: 2
		// });
	}
}

页面调用（就不详细描述了，使用很简单）

this.goPage('1','subPackages/mine/index');

如果您是自定义的顶部返回事件，点击返回可能需要先判断是否有历史界面，如果有则返回上一页，没有则返回首页，如下

// 返回
returnBtn(){
	let pageNum = getCurrentPages();
	if(pageNum.length > 1){
		uni.navigateBack()
	} else {
		uni.switchTab({
			url:'/pages/home/index'
		});
	}
}

vue判断没有上页返回首页 https://sharedbk.com/post/215.html