Page Routing

The framework manages all the routes to pages of a Mini Program.

Page Stack

The framework maintains all the existing pages via stacks. When a route is switched, the page stack reacts as follows:

Routing Reaction on the Page Stack
Initialization The new page is pushed onto the stack.
Opening a new page The new page is pushed onto the stack.
Page redirection The current page is popped out of the stack, and the new page is pushed onto the stack.
Page return Pages are successively popped out of the stack until the destination return page is displayed.
Tab switching All the pages are popped out of the stack, and only the new tab page is retained.
Reloading All the pages are popped out of the stack, and only the new page is retained.

Developers can obtain the current page stack by using the getCurrentPages() function.

Routing

The following shows how page routing is triggered and the lifecycle functions for pages.

Routing Trigger Condition Source Page Routed-To Page
Initialization A page of the Mini Program is opened for the first time. onLoad, onShow
Opening a new page The API wx.navigateTo is called.
The component <navigator open-type="navigateTo"/> is used.
onHide onLoad, onShow
Page redirection The API wx.redirectTo is called.
The component <navigator open-type="redirectTo"/> is used.
onUnload onLoad, onShow
Page return The API wx.navigateBack is called.
The component <navigator open-type="navigateBack"> is used.
The user taps the return button on the top left.
onUnload onShow
Tab switching The API wx.switchTab is called.
The component <navigator open-type="switchTab"/> is used.
The user switches between tabs.
For details, refer to the following table.
Restart The API wx.reLaunch is called.
The component <navigator open-type="reLaunch"/> is used.
onUnload onLoad, onShow

Lifecycle functions corresponding to tab switching (in the following example, pages A and B are Tabbar pages, page C is obtained after page A is opened, and page D is obtained after page C is opened):

Current Page Routed-To Page Triggered Lifecycle Function (In Order)
A A Nothing happend
A B A.onHide(), B.onLoad(), B.onShow()
A B (Opened again) 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 due to redirection) A D.onUnload(), A.onLoad(), A.onShow()
D (Entered due to redirection) B D.onUnload(), B.onLoad(), B.onShow()

Tips:

  • navigateTo and redirectTo can be used to open non-tabBar pages only.
  • switchTab can be used to open tabBar pages only.
  • reLaunch can be used to open any pages.
  • The tabBar on the bottom of a page is determined by the page. In other words, tabBar is displayed on the bottom of all pages defined as tabBar.
  • Parameters used to call page routing can be obtained via onLoad in the destination page.