Introduction to the navigation of WeChat applet page and detailed explanation of usage

Page Navigation

1. What is page navigation

Page navigation refers to the mutual jump between pages. For example, there are two ways to implement page navigation in a browser:

① <a> Link

②

2. Two ways to implement page navigation in mini programs

① Declarative navigation

Declare a <navigator> navigation component on the page to achieve page jump by clicking the <navigator> component

② Programming navigation

Call the navigation API of the applet to realize page jump

Declarative navigation

1. Navigate to the tabBar page

tabBar page refers to a page configured as a tabBar.

When you use the <navigator> component to jump to the specified tabBar page, you need to specify the url attribute and the open-type attribute, where:

url represents the address of the page to be redirected and must start with /
open-type means the jump method, which must be switchTab

The sample code is as follows:

&lt;navigator url="/pages/message/message" open-type="switchTab"&gt;Navigate to the message page&lt;/navigator&gt;

2. Navigate to a non-tabBar page

A non-tabBar page refers to a page that is not configured as a tabBar.

When you use the <navigator> component to jump to a normal non-tabBar page, you need to specify the url attribute and the open-type attribute, where:

url represents the address of the page to be redirected and must start with /
open-type means the jump method, it must be navigate

The sample code is as follows:

&lt;navigator url="/pages/info/info" open-type="navigate"&gt;Navigate toinfopage&lt;/navigator&gt;

Note: For simplicity, the open-type="navigate" property can be omitted when navigating to a non-tabBar page.

3. Back navigation

If you want to back down to the previous page or multi-level page, you need to specify the open-type attribute and the delta attribute, where:

The value of open-type must be navigateBack, indicating that you want to perform back navigation.
The value of delta must be a number, indicating the level to be backed

The sample code is as follows:

&lt;navigator open-type="navigateBack"&gt;Back&lt;/navigator&gt;

Note: For simplicity, if you just back to the previous page, you can omit the delta attribute because its default value is 1.

Programming Navigation

1. Navigate to the tabBar page

Calling the (Object object) method can jump to the tabBar page. The attribute list of the Object parameter object is as follows:

property	type	Necessary	illustrate
url	string	yes	The path to the tabBar page that needs to be redirected cannot be followed by parameters
success	function	no	The callback function that was successfully called by the interface
fail	function	no	The callback function that failed to call the interface
complete	function	no	The callback function at the end of the interface call (the call will be executed if it is successful or failed)

The sample code is as follows:

&lt;button bindtap="gotoMessage"&gt;Jump tomessagepage&lt;/button&gt;

 gotoMessage() {
    ({
      url: '/pages/message/message'
    })
  },

2. Navigate to a non-tabBar page

Calling the (Object object) method can jump to non-tabBar pages. The attribute list of the Object parameter object

as follows:

property	type	Necessary	illustrate
url	string	yes	The path to the tabBar page that needs to be redirected cannot be followed by parameters
success	function	no	The callback function that was successfully called by the interface
fail	function	no	The callback function that failed to call the interface
complete	function	no	The callback function at the end of the interface call (the call will be executed if it is successful or failed)

The sample code is as follows:

&lt;button bindtap="gotoInfo"&gt;Jump toinfopage&lt;/button&gt;

  gotoInfo() {
    ({
      url: '/pages/info/info'
    })
  },

3. Back navigation

Calling the (Object object) method can return to the previous page or multiple-level pages. Where Object parameter object

Optional

The attribute list is as follows:

property	type	default value	Necessary	illustrate
delta	number	1	no	The number of pages returned. If delta is greater than the number of existing pages, it will return to the home page.
success	function		no	The callback function that was successfully called by the interface
fail	function		no	The callback function that failed to call the interface
complete	function		no	The callback function at the end of the interface call (the call will be executed if it is successful or failed)

The sample code is as follows:

&lt;button bindtap="goBack"&gt;Back&lt;/button&gt;

  goBack() {
    ({
      delta: 1
    })
  },

This is the article about the introduction and detailed explanation of the navigation of WeChat applet pages. For more related applet pages, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!