Applet page navigation

There are two ways to realize page navigation in applet

1. Declarative navigation
   • Declare a navigation component on the page
   • Click the component to realize page Jump
2. Programming navigation
   • Calling applet navigation API, Realize page Jump

One 、 Declarative navigation

1. Navigate to tabBar page

tabBar A page refers to a page that is configured to tabBar The page of

When using the component, jump to the specified tabBar When the page is , You need to specify the url Properties and open-type attribute , among ：

1. url Indicates the page address to jump to , Must be / start
2. open-type Indicates how to jump , It has to be for switchTab

<navigator url="/pages/message/message" open-type="switchTap"> Navigate to the message page </navigator>

2. Navigate to non tabBar page

Not tabBar page ： Not in the tabBar Configured page

Jump to normal non tabBar When the page is , You need to specify url Properties and open-type attribute ：

1. url Indicates the page address to jump to , Must be / start
2. open-type Indicates how to jump , It has to be for navigate

<navigator url="/pages/info/info" open-type="navigate"> Navigate to non tabBar page </navigator>

Navigate to non tabBar When the page is ,open-type=“navigate” You can omit it , You can also navigate to the specified page

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 ,：

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

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

notes ： If you just go back to the previous page , be delta You can omit it , Because the default value is 1

Two 、 Programming navigation

1. Navigate to tabBar page

call wx.switchTab(object,object) Method , You can jump to tabBar page , among object The properties of the parameter object are as follows ：

Sample code ：

<button bindTab="goMessage"> Jump to message</button>

goMessage(){
     
    wx.switchTab({
     
        url:"/pages/message/message"
    })
}

2. Jump to non tabBar page

call wx.switchTo(object,object) Method , You can jump to non tabBar page . among object Attribute list of parameter object ：

Sample code ：

<button bindtap="goInfo"> Jump to non tabBar page </button>

goInfo(){
     
    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 attribute list of parameter formation is as follows ：

Sample code ：

<button bindtab="goBack"> Back to previous page </button>
goBack(){
     
    wx.navigateBack({
     
      delta:1  //  The default is 1, You can omit it 
    });
  },