Skip to main content

Router

Routing API#

In a mini-program, default routing features are presented and don't necessitate any further configuration by the developer.

You just need to declare the pages in the configuration of the entrance file, then you can jump to the destination page by utilizing the API provided by the mini-program. For example:

// Navigate to the destination page and open a new pagebn.navigateTo({  url: '/pages/page/path/name'})
// Navigate to the destination page and open it on the current pagebn.redirectTo({  url: '/pages/page/path/name'})

For a detailed description of the API, please refer to the API documentation.

Route Passing#

You can redirect by appending a query string parameter after all the jumped URLs. For example:

// Pass in the parameters id=2&type=testbn.navigateTo({  url: '/pages/page/path/name?id=2&type=test'})

In this case, the passed parameters will be available in the lifecycle method of the target page once the jump is successful. This can be accessed through getCurrentInstance().router.params. For the above navigation action, in the onShow() lifecycle of the target page:

Page({  onShow() {    console.log(getCurrentInstance().router.params) // output { id: 2, type: 'test' }  }})

EventChannel#

When calling navigateTo, we can use EventChannel to facilitate communication between the opener page and the opened page. For instance:

// Page Abn.navigateTo({  url: '/pages/page/path/B',  events: {    // Add listeners to receive data from the opened page    acceptDataFromOpenedPage: function(data) {      console.log(data)    },    someEvent: function(data) {      console.log(data)    }  }}).then((res) => {  // Send data to the opened page  res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'I am the opener page' })})
// Page BPage({  onShow() {    const eventChannel = getCurrentInstance().page.getOpenerEventChannel()    // Send data to the opener page    eventChannel.emit('acceptDataFromOpenedPage', {data: 'I am the opened page'});    eventChannel.emit('someEvent', {data: 'test'});    // Add listener to receive data from the opener page    eventChannel.on('acceptDataFromOpenerPage', function(data) {      console.log(data)    })  }})