Learning objectives of this section ：
Learn how to use the navigation jump between pages

One . Page navigation

What is page navigation

Page navigation It refers to the mutual jump between pages .

2. Two ways to realize page navigation

Page navigation has Two ways of implementation ：

1. Declarative navigation

Method ： Declare a navigator Components , Click this component to jump to the page .

2. Programming navigation

Method ： Calling applet navigation API Realize page Jump .

Two . Declarative navigation

1. Navigate to tabBar page

tab Page fingers are configured as tabBar The page of , In the use of specified navigator When the component jumps to the specified page , Must specify url Properties and open-style attribute , among ：

• url Indicates the page address to jump to , Must be / start
• open-strle Indicates how to jump , This must be switchTab

<navigator url="/pages/message/message" open-type="switchTab"> Jump to the message page </navigator>

2. Navigate to non tabBar page

Not tabBar A page is one that is not configured to tabBar The page of . In the use of naxigator Component jump to non tabBar When the page is , You also need to specify url Properties and open-type attribute , among ：

• url Indicates the page address to jump to , Must be / start
• open-style Indicates how to jump , This must be navigate, At this point, this attribute can be omitted

<navigator url="/pages/info/info" open-type="navigate"> Jump to info page </navigator>

3. Back navigation

If you want to go back to the previous page or multi-level page , You need to specify open-type Properties and delta attribute , among ：

• open-type The value of must be navigateBack, Indicates that you want to perform back navigation
• delta The value of must be a number , Indicates the level to go back , The default is 1

<navigator open-type="navigateBack" delta="1"> Go back to the previous page </navigator>

3、 ... and . Programming navigation

1. Navigate to tabBar page

call wx.switchTab(Object object) Method , You can jump to tabBar page . among Object The attribute list of the parameter object is explained in the official document as follows :

wxml Code ：

<button bindtap="gotoMessage" type="primary"> Jump to the message page </button>

js Code ：

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

2. Navigate to non tabBar page

call wx.navigateTo(Object object) Method , You can jump to non tabBar The page of . among Object The attribute list of the parameter object is explained in the official document as follows ：

wxml\ Code ：

<button bindtap="gotoinfo" type="primary"> Jump to info page </button>

js Code ：

  gotoinfo(){
    
    wx.navigateTo({
    
      url: '/pages/info/info',
    })
  },

3. Back navigation

call wx.navigateBack(Object object) Method , You can return to the previous page or multiple pages . among Object The optional attribute list of the parameter object is explained in the official document as follows ：

wxml Code ：

<button bindtap="goBack"> Go back to the previous page </button>

js Code ：

  goBack(){
    
    wx.navigateBack({
    
      delta: 1,
    })
  },

Four . Navigation parameters

1. Declarative navigation parameters

navigator Component's url Attribute is used to specify that The path of the page to jump to . meanwhile , Parameters can also be carried behind the path ：

• Use... Between parameters and paths ? Separate
• Parameter key and parameter value = Connected to a
• Use... For different parameters & Separate

<navigator url="/pages/info/info?name=zs&age=20" open-type="navigate"> Jump to info page </navigator>

2. Programming navigation parameters

call wx.navigateTo(Object object) Method to jump to the page , You can also carry parameters .

  gotoinfo(){
    
    wx.navigateTo({
    
      url: '/pages/info/info?name=ls&age=22',
    })
  },

3. stay onLoad Receive navigation parameters in

Parameters carried by declarative navigation parameters or programmatic navigation parameters , Can be directly in onLoad Get directly from the event .

  data: {
    
    // Navigate the parameter object passed ： Define an empty array of objects 
	quary:{
    }
  },

  onLoad(options) {
    
	console.log(options)
	this.setData({
    
  	quary:options
})

5、 ... and . summary

This section learned two ways of page navigation and two ways of navigating to tabBar Page and non tabBar The way of the page , And the method of navigation and parameter transmission .