uniapp页面跳转的几种方式

一、uni.navigateTo

定义：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

1.不传参

	uni.navigateTo({
		url:'../index/index'
	});

2.传参静态字符串 

uni.navigateTo({
	url:`../index/index?title=张三&age=18`
});

onLoad(option) {
	console.log(option)
},

 

3.传参动态字符串

跳转

data() {
    return {			
		title:'标题',
	}
},

uni.navigateTo({
	url:`../index/index?title=${this.title}`
});

index页面接收

	onLoad(option) {
			console.log(option)
	},

4.传参对象 

跳转

data() {
	return {
		data:{
		    title:'hello',
			id: 1
		}				
	}
},

uni.navigateTo({
	url:`../index/index?data1111=`+ encodeURIComponent(JSON.stringify(this.data))
})

encodeURIComponent(JSON.stringify(data)) 是一个常见的用法，用于将 JavaScript 对象或数组转换为 JSON 字符串，并对该字符串进行 URL 编码。

index页面接收

onLoad(option) {
	const item = JSON.parse(decodeURIComponent(option.data1111));
	console.log(item)
},

 JSON.parse(decodeURIComponent(option.item)) 是一种常见的用法，用于将经过 URL 编码并转换为字符串的 JSON 数据解码，并将其转换回 JavaScript 对象的形式。

二、uni.redirectTo 

定义：可以关闭当前界面并跳转到其他的非tabbar界面（可带参数）

uni.redirectTo({
  url:'./home/index'
});

三、uni.reLaunch

定义：关闭所有页面，打开到应用内的某个页面（可带参数）

uni.reLaunch({
    url:'./home/index'
});

四、uni.switchTab

定义：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

uni.switchTab({
   url:'./home/index'
});

 五、uni.navigateBack

定义：关闭当前页面，返回上一页面或多级页面

uni.navigateBack({
    url:'./home/index'
});
uni.navigateBack({
    delta: 2
});

 总结

• navigateTo, redirectTo 只能打开非 Tab 页面，可传参。
• switchTab 只能打开 Tab 页面，不可传参。
• reLaunch 可以打开任意页面，可传参。