uniapp基础篇 - - 页面跳转和传值

---

一、今日学习目标

• 了解uniapp跳转的几种方式
• 实现页面传值

---

二、页面跳转的方式

⚠️注意：跳转到 tabBar 页面只能使用 switchTab 跳转

1. uni.navigateTo( )

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

uni.navigateTo({
	url: '../test/test'
});
1
2
3

2. uni.navigateBack( )

• 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
	delta: 2
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. uni.redirectTo( )

• 关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
	url: 'test?id=1'
});
1
2
3

4. uni.reLaunch( )

• 关闭所有页面，打开到应用内的某个页面
• 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide
• H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。

uni.reLaunch({
	url: '../login/login'
});
1
2
3

5. uni.switchTab( )

• 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
• 如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide

uni.switchTab({
	url: '/pages/index/index'
});
1
2
3

---

三、页面传值

1.常用方式

//父页面跳转携带参数，uni.reLaunch()都是一样的方法
uni.navigateTo({
	url: 'test?id=1&name=peng'
});

// 子页面取参
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
	console.log(option.id); //打印出上个页面传递的参数。
	console.log(option.name); //打印出上个页面传递的参数。
}
1
2
3
4
5
6
7
8
9
10

---

总结

总结所有页面跳转方法的注意事项：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
  不能在 App.vue 里面进行页面跳转。
• H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。