Discuss the page jump problem of uniapp’s navigator

 "tabBar": {<!-- -->
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
// The list in tabBar is an array, and only a minimum of 2 and a maximum of 5 tabs can be configured. The tabs are sorted in the order of the array.
"list": [{<!-- -->
"pagePath": "pages/navigator/navigator",
"text": "tab1"
}, {<!-- -->
"pagePath": "pages/navigator/navigate/navigate",
"text": "tab2"
}, {<!-- -->
"pagePath": "pages/textareaD/textareaD",
"text": "tab3"
}
]
}

1 uni.navigateTo(OBJECT)

Keep the current page [the current page is hidden], jump to a page in the application, and use uni.navigateBack to return to the original page.

<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
<button type="default">Jump to new page</button>
</navigator>

But there is a problem here: navigateTo:fail can not navigateTo a tabbar page

Use uni.navigateBack to return to the original page.

in:

//Jump to the test.vue page on the start page and pass parameters
uni.navigateTo({<!-- -->
url: 'test?id=1 & name=uniapp'
});

// Accept parameters on the test.vue page
export default {<!-- -->
onLoad: function (option) {<!-- --> //option is of object type and will serialize the parameters passed on the previous page.
console.log(option.id); //Print out the parameters passed on the previous page.
console.log(option.name); //Print out the parameters passed on the previous page.
}
}

// Jump to the test.vue page on the start page, and listen to the event data sent by test.vue
uni.navigateTo({<!-- -->
  url: '/pages/test?id=1',
  events: {<!-- -->
    // Add a listener for the specified event to get the data sent from the opened page to the current page
    acceptDataFromOpenedPage: function(data) {<!-- -->
      console.log(data)
    },
    someEvent: function(data) {<!-- -->
      console.log(data)
    }
    ...
  },
  success: function(res) {<!-- -->
    // Send data to the opened page through eventChannel
    res.eventChannel.emit('acceptDataFromOpenerPage', {<!-- --> data: 'data from starter page' })
  }
})

// On the test.vue page, pass data to the start page through events
onLoad: function(option) {<!-- -->
  const eventChannel = this. getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {<!-- -->data: 'data from test page'});
  eventChannel.emit('someEvent', {<!-- -->data: 'data from test page for someEvent'});
  // Listen to the acceptDataFromOpenerPage event to get the data sent from the previous page to the current page through eventChannel
  eventChannel.on('acceptDataFromOpenerPage', function(data) {<!-- -->
    console.log(data)
  })
}

The URL has a length limit. Strings that are too long will fail to be transmitted. You can use form communication and global variables instead. In addition, when special characters such as spaces appear in the parameters, the parameters need to be encoded. The following is the use of encodeURIComponent Example of encoding parameters.

<navigator :url="'/pages/test/test?item=' + encodeURIComponent(JSON.stringify(item))"></navigator>

// Accept parameters on the test.vue page
onLoad: function (option) {<!-- -->
const item = JSON. parse(decodeURIComponent(option. item));
}

Notice:

• The page jump path has a hierarchical limit, and it cannot jump to new pages without limit
• Jump to the tabBar page can only use switchTab to jump
• The target page of the routing API must be a vue page registered in pages.json. If you want to open the web url, you can use it on the App platform
  plus.runtime.openURL or web-view component; the H5 platform uses window.open; the mini program platform uses the web-view component (the URL must be in the mini program’s networking whitelist). There is a component ulink.vue in hellouni-app that has encapsulated multiple terminals, please refer to

2 uni.redirectTo(OBJECT)

Close the current page and jump to a page in the app.

3 uni.reLaunch(OBJECT)

Close all pages and open to a page within the app.
Note: If uni.preloadPage(OBJECT) is called, it will not be closed, it will only trigger the lifecycle onHide

After the H5 side calls uni.reLaunch, the previous page stack will be destroyed, but the previous history of the browser cannot be cleared. At this time, navigateBack cannot return. If there is a history, you can still navigate by clicking the browser’s return button or calling history.back(). to other browser history

4 uni.switchTab(OBJECT)

Jump to the tabBar page and close all other non-tabBar pages.
Note: If uni.preloadPage(OBJECT) is called, it will not be closed, it will only trigger the lifecycle onHide

5 uni.navigateBack(OBJECT)

Close the current page and return to the previous page or multi-level pages. The current page stack can be obtained through getCurrentPages() to determine how many layers need to be returned.
OBJECT parameter description

6 EventChannel

2.8.9 + supports inter-page event communication channel

method:

EventChannel. emit(string eventName, any args)

trigger an event
string eventName event name
any args event parameters

EventChannel.off(string eventName, function fn)

Cancel listening for an event. When the second parameter is given, only the given listener function is canceled, otherwise all listener functions are canceled
string eventName event name
function fn event listening function

EventChannel.on(string eventName, function fn)

Continuously listen to an event
string eventName event name
function fn event listening function

EventChannel.once(string eventName, function fn)

Listen to an event once and fail after triggering
string eventName event name
function fn event listener function

Tips:

• navigateTo, redirectTo can only open non-tabBar pages. switchTab can only open tabBar pages.
  reLaunch can open any page.
• The tabBar at the bottom of the page is determined by the page, that is, as long as the page is defined as tabBar, there will be a tabBar at the bottom.
• Page jumps cannot be performed in App.vue.
• The page stack will disappear after the H5 page is refreshed. NavigateBack cannot return at this time. If you must return, you can use history.back() to navigate to other history records of the browser.

7 getCurrentPages()

The getCurrentPages() function is used to obtain the instance of the current page stack, which is given in the form of an array in the order of the stack. The first element is the home page, and the last element is the current page.

Note: getCurrentPages() is only used to display the status of the page stack, please do not modify the page stack to avoid page status errors.
List of method properties for each page instance: