---
title: Page Routing
---

# Page Routing

In a miniApp, the framework manages all page routing.

## Routing Stack

The page routes in a miniApp are structured as a stack, and can only be operated upon using `ty.navigateTo` and `ty.redirectTo`, among others. The page routing stack has a maximum depth of ten layers, after which routing operations will no longer be effective.

## Routing Methods

The triggering methods for routing and the page lifecycle functions are as follows:

| Routing Method   | Triggering Event                                                      | Previous Page | Current Page                      | Page Stack |
| :--------------- | :-------------------------------------------------------------------- | :------------ | :-------------------------------- | :--------- |
| Initialization   | The first page opened in the miniApp                                  |               | onLoad onShow onReady             | [A]        |
| Open New Page    | [ty.navigateTo](/en/miniapp/develop/miniapp/api/route/navigateTo)     | onHide        | onLoad onShow onReady             | [A, B]     |
| Page Redirection | [ty.redirectTo](/en/miniapp/develop/miniapp/api/route/redirectTo)     | onUnload      | onLoad onShow onReady             | [A, C]     |
| Page Return      | [ty.navigateBack](/en/miniapp/develop/miniapp/api/route/navigateBack) | onUnload      | onShow                            | [A]        |
| Tab Switching    | [ty.switchTab](/en/miniapp/develop/miniapp/api/route/switchTab)       |               | See table below for various cases | [D]        |
| Restart          | [ty.reLaunch](/en/miniapp/develop/miniapp/api/route/reLaunch)         | onUnload      | onLoad onShow onReady             | [A]        |

**Lifecycle events corresponding to tab switching (using pages A and B as tab bar pages, C as a page opened from A, and D as a page opened from C) are as follows:**

| Current Page                | Destination Page | Triggered Lifecycle Events (in order)              |
| :-------------------------- | :--------------- | :------------------------------------------------- |
| A                           | A                | Nothing happened                                   |
| A                           | B                | A.onHide(), B.onLoad(), B.onShow()                 |
| A                           | B (reopened)     | 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 (entered through sharing) | A                | D.onUnload(), A.onLoad(), A.onShow()               |
| D (entered through sharing) | B                | D.onUnload(), B.onLoad(), B.onShow()               |

## Routing Path URL

The routing path is an absolute path that starts with `/`, followed by the page path, such as `/pages/index/index`. The routing path is a path relative to the miniApp root directory.

The routing path must be a valid path, and must be declared in `app.json`.

### Relative Path Mode

Relative path mode refers to a routing path that does not begin with `/`, such as `index/index`. Relative path mode is based on the current page, and the path is concatenated accordingly.

```js
Page({
  onLoad() {
    // The current page is /pages/home
    ty.navigateTo({
      url: 'index/index', // Navigate to /pages/index/index (relative to /pages/home)
    });
  },
});
```

Note: Always use absolute path mode whenever possible, to avoid path errors. Unless you know the current page path explicitly!

## Notes

- `navigateTo` and `redirectTo` can only open non-tab bar pages.
- `switchTab` can only open tab bar pages.
- `reLaunch` can open any page.
- The tab bar at the bottom of the page is determined by the page itself. That is, any page defined as a tab bar page will have a tab bar at the bottom.
- Parameters passed with a page route can be retrieved using `onLoad(query)` in the target page.