---
title: 页面路由
summary: "介绍小程序页面路由机制，包括路由栈管理、各路由方式的生命周期触发顺序及路径规则。"
questions:
  - 涂鸦小程序的页面路由栈最多支持多少层？
  - navigateTo、redirectTo 和 reLaunch 在路由行为上有什么区别？
  - Tab 切换时各页面的生命周期函数触发顺序是怎样的？
  - 路由路径中绝对路径和相对路径的使用方式有什么不同？
  - switchTab 和 navigateTo 在打开页面类型上有什么限制？
  - 页面路由传递的参数在目标页面的哪个生命周期中获取？
  - 为什么建议优先使用绝对路径而非相对路径进行页面跳转？
---

# 页面路由

在小程序中所有页面的路由全部由框架进行管理。

## 路由栈

小程序中的页面路由是一个栈结构，只能通过 `ty.navigateTo` 和 `ty.redirectTo` 等方式操作。且页面路由栈最多十层。路由操作则不再生效。

## 路由方式

对于路由的触发方式以及页面生命周期函数如下：

| 路由方式   | 触发时机                                                              | 路由前页面 | 路由后页面            | 页面栈 |
| :--------- | :-------------------------------------------------------------------- | :--------- | :-------------------- | :----- |
| 初始化     | 小程序打开的第一个页面                                                |            | onLoad onShow onReady | [A]    |
| 打开新页面 | [ty.navigateTo](/cn/miniapp/develop/miniapp/api/route/navigateTo)     | onHide     | onLoad onShow onReady | [A, B] |
| 页面重定向 | [ty.redirectTo](/cn/miniapp/develop/miniapp/api/route/redirectTo)     | onUnload   | onLoad onShow onReady | [A, C] |
| 页面返回   | [ty.navigateBack](/cn/miniapp/develop/miniapp/api/route/navigateBack) | onUnload   | onShow                | [A]    |
| Tab 切换   | [ty.switchTab](/cn/miniapp/develop/miniapp/api/route/switchTab)       |            | 各种情况请参考下表    | [D]    |
| 重启动     | [ty.reLaunch](/cn/miniapp/develop/miniapp/api/route/reLaunch)         | onUnload   | onLoad onShow onReady | [A]    |

**Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：**

| 当前页面        | 路由后页面    | 触发的生命周期（按顺序）                           |
| :-------------- | :------------ | :------------------------------------------------- |
| A               | A             | Nothing happend                                    |
| A               | B             | A.onHide(), B.onLoad(), B.onShow()                 |
| A               | B（再次打开） | A.onHide(), B.onShow()                             |
| C               | A             | C.onUnload(), A.onShow()                           |
| C               | B             | C.onUnload(), B.onLoad(), B.onShow()               |
| D               | B             | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() |
| D（从转发进入） | A             | D.onUnload(), A.onLoad(), A.onShow()               |
| D（从转发进入） | B             | D.onUnload(), B.onLoad(), B.onShow()               |

## 路由路径 URL

路由路径是一个绝对路径，以 `/` 开头，后面跟随页面的路径，如 `/pages/index/index`。路由路径是一个相对于小程序根目录的路径。

路由路径必须是一个有效的路径，在 `app.json` 中声明过的页面路径。

### 相对路径模式

相对路径模式是指在路由路径中不以 `/` 开头，如 `index/index`。相对路径模式会以当前页面为基准，进行路径的拼接。

```js
Page({
  onLoad() {
    // 当前页面是 /pages/home
    ty.navigateTo({
      url: 'index/index', // 跳转到 /pages/index/index (相对于 /pages/home)
    })
  },
})
```

注意：任何时候优先使用绝对路径模式，避免出现路径错误的情况。除非您明确知道当前页面的路径！

## 注意事项

- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的 onLoad(query) 中获取。