# 页面路由
# 页面栈
页面栈以栈（先进后出）的形式维护页面与页面之间的关系，路由更改了页面栈的层数，小程序页面栈(历史记录)最多10层
小程序提供了getCurrentPages()函数获取页面栈，第一个元素为首页，最后一个元素为当前页面
| 路由方式 | 页面展表现 |
|---|---|
| 初始化 | 新页面入栈 |
| 打开新页面 | 新页面入栈 |
| 页面重定向 | 当前页面出栈,新页面入栈 |
| 页面返回 | 页面不断出栈,直到目标返回页 |
| Tab切换 | 页面全部出栈,只留下新的Tab页面 |
| 重加载 | 页面全部出栈,只留下新的页面 |
# 方式一:API进行页面间跳转
# wx.switchTab Tab切换
跳转到 tabBar 页面，并关闭所有 页面，页面栈内仅剩当前页。 跳转的时候不能页面传参 只能跳转到tabbar页面
wx.switchTab({
url: '/pages/index/index'
})
1
2
3
2
3
# wx.reLaunch 重加载
关闭所有页面，打开到应用内的某个页面，页面栈内仅剩当前页面。 使用 wx. reLaunch({ url: ‘pageH’ }) 会重启小程序
// index Tab页面 --> A页面 --> B页面 --> C页面 当前 C 页面
// 显示 A 页面
wx.reLaunch({
url: '../A/A'
})
// 显示index Tab页面
wx.reLauch({
url: "/pages/index/index"
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# wx.redirecTo
关闭当前页面，跳转到应用内的某个页面，页面栈数量不增不减。但是不允许跳转到 tabbar 页面。
// index Tab页面 --> A页面 --> B页面 --> C页面 当前 C 页面
// 重定向到 A页面,此时页面栈 [index页面,A页面,B页面,A页面]
wx.redirecTo({
url: '../A/A'
})
1
2
3
4
5
6
2
3
4
5
6
# wx.navigateTo
保留当前页面，跳转到应用内的某个页面，页面栈数量 + 1。但是不能跳到 tabbar 页面。
// 当前 A页面, 跳转到 B页面
wx.navigateTo({
url: '../B/B'
})
1
2
3
4
2
3
4
# wx.navigateBack
关闭当前页面，返回上一页面或多级页面 页面栈数量 - n。可通过 getCurrentPages (opens new window) 获取当前的页面栈，决定需要返回几层。
// A页面 --> B页面 --> C页面 当前 C 页面
wx.navigateBack(); // 返回 B 页面
// 返回A页面
wx.navigateBack({
delta: 2 // 返回的页面数,如果大于现有页面数,则返回页面栈第一个页面
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 方式二:组件方式进行页面间跳转
<!--
url 要跳转的页面路径
open-type 跳转方式 对应上面的跳转方法
navigate、redirect、switchTab、reLaunch、navigateBack
delta 当 open-type 为 'navigateBack' 时有效，表示回退的层数,默认为 1
-->
<navigator url="pages/logs/index" open-type="navigate">跳转</navigator>
<navigator delta="1" open-type="navigateBack">返回</navigator>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9