All Products
Search
Document Center

Route

Last Updated: Feb 19, 2021

my.switchTab

Jump to the specified tabBar page and close all other pages that are not tabBar.

Note:
  • If the Mini Program is an application of multiple tabs (tabs can be switched at the bottom of the client window), it is possible to use tabBar to configure the behavior of the specified tab, and the page to display during the tab switchover.
  • On the page to which it jumps through the page jumping (my.navigateTo) or page redirecting (my.redirectTo), even if the page is defined in the tabBar configuration, the bottom tab bar is not displayed. In addition, the first page of the tabBar must be the home page.
  • The first page of the tabBar must be the home page.

See Route related FAQs to learn more.

Effect

Sample code

  1. // app.json
  2. {
  3. "tabBar": {
  4. "items": [{
  5. "pagePath": "page/home/index",
  6. "name": "Home"
  7. },{
  8. "pagePath": "page/user/index",
  9. "name": "User"
  10. }]
  11. }
  12. }
  1. //.js
  2. my.switchTab({
  3. url: 'page/home/index'
  4. })

Parameters

The parameters are of Object type, with attributes as follows:

Parameter Type Required Description
url String Yes Path of the jumping tabBar page (page to be defined in the tabBar field in the app.json.
Note: The path cannot be followed by parameters.
success Function No Callback function upon call success.
fail Function No Callback function upon call failure.
complete Function No Callback function upon call completion (to be executed upon either call success or failure).

tabBar Configuration

Attribute Type Required Description
textColor HexColor No Text color.
selectedColor HexColor No Color of highlighted text.
backgroundColor HexColor No Background color.
items Array Yes Configured for each tab.

configurations for items:

Attribute Type Required Description
pagePath String Yes Set page path.
name String Yes Name.
icon String No Normal icon path. The recommended size is 60 × 60 px, and the system will stretch or scale any incoming images non-proportionally.
activeIcon String No Highlighted icon path.

Sample configuration

  1. // tabBar Sample configuration
  2. {
  3. "tabBar": {
  4. "textColor": "#dddddd",
  5. "selectedColor": "#49a9ee",
  6. "backgroundColor": "#ffffff",
  7. "items": [
  8. {
  9. "pagePath": "pages/index/index",
  10. "name": "Home"
  11. },
  12. {
  13. "pagePath": "pages/logs/logs",
  14. "name": "Log"
  15. }
  16. ]
  17. }
  18. }

my.reLaunch

Close all current pages and jump to the specified page within the application.

Requirement on version: Base library 1.4.0 or later versions. For earlier versions, it is suggested to perform compatibility processing.

See Route related FAQs to learn more.

Effect

Sample code

  1. my.reLaunch({
  2. url: '/page/index'
  3. })

Parameters

The parameters are of Object type, with attributes as follows:

Parameter Type Required Description
url String Yes Page path If the page is not a tabBar page, the path can be followed by parameters. Rules for the parameters: The path and parameter are separated with “?”, the parameter key and the parameter value are connected with “=”, and different parameters must be separated with “&”, such as path?key1=value1&key2=value2.
success Function No Callback function upon call success.
fail Function No Callback function upon call failure.
complete Function No Callback function upon call completion (to be executed upon either call success or failure).

my.redirectTo

Close the current page and jump to the specified page within the application.

See Route related FAQs to learn more.

Note: When you use my.redirectTo to navigate to a specific page, you will be redirected to the target page on which no back arrow is available, and the current page will be closed.

Effect

Sample code

  1. my.redirectTo({
  2. url: 'new_page?count=100' //The URL can be an absolute or relative path
  3. })

With redirecting to the index page of the home page for example:

  • Use absolute path: URL is /pages/index/index.
  • Use relative path: URL is ../index/index.

Parameters

The parameters are of Object type, with attributes as follows:

Parameter Type Required Description
url String Yes The application for the jumping does not include the destination page path of the tabBar. The path can be followed by parameters.
Rules for the parameters: The path and parameter are separated with “?”, the parameter key and the parameter value are connected with “=”, and different parameters must be separated with “&”, such as path?key1=value1&key2=value2.
success Function No Callback function upon call success.
fail Function No Callback function upon call failure.
complete Function No Callback function upon call completion (to be executed upon either call success or failure).

my.navigateTo

Maintain the current page and jump to the specified page within the application.

  • You can use my.navigateBack to return to the original page.
  • The maximum page depth is 10. In other words, the navigateTo can be called 10 times at most.

my.navigateTo and my.redirectTo do not support jumping to tabBar page. If neccessary, you can use my.switchTab to redirect to the tabBar page.

See Route related FAQs to learn more.

Effect

Sample code

  1. // API-DEMO page/API/navigator/navigator.json
  2. {
  3. "defaultTitle": "page redirection"
  4. }
  1. <!-- API-DEMO page/API/navigator/navigator.axml-->
  2. <view class="page">
  3. <view class="page-section">
  4. <button type="primary" onTap="navigateTo">Jump to new page</button>
  5. <button type="primary" onTap="navigateBack">Return to previous page</button>
  6. <button type="primary" onTap="redirectTo">Open on the current page - obtain user information</button>
  7. <button type="primary" onTap="switchTab">Jump Tab - component</button>
  8. <view class="page-description">This Demo only provides instructions on APIs, not covering mini program redirection function. To learn about the mini program redirection, see the relevant documents.</view>
  9. <button type="primary" onTap="navigateToMiniProgram">Jump to mini program</button>
  10. <button type="primary" onTap="navigateBackMiniProgram">Jump back to mini program</button>
  11. </view>
  12. </view>
  1. // API-DEMO page/API/navigator/navigator.js
  2. Page({
  3. navigateTo() {
  4. my.navigateTo({ url: '../get-user-info/get-user-info' })
  5. },
  6. navigateBack() {
  7. my.navigateBack()
  8. },
  9. redirectTo() {
  10. my.redirectTo({ url: '../get-user-info/get-user-info' })
  11. },
  12. navigateToMiniProgram() {
  13. if (my.canIUse('navigateToMiniProgram')) {
  14. my.navigateToMiniProgram({
  15. appId: '2017072607907880',
  16. extraData: {
  17. "data1": "test"
  18. },
  19. success: (res) => {
  20. console.log(JSON.stringify(res))
  21. },
  22. fail: (res) => {
  23. console.log(JSON.stringify(res))
  24. }
  25. });
  26. }
  27. },
  28. navigateBackMiniProgram() {
  29. if (my.canIUse('navigateBackMiniProgram')) {
  30. my.navigateBackMiniProgram({
  31. extraData: {
  32. "data1": "test"
  33. },
  34. success: (res) => {
  35. console.log(JSON.stringify(res))
  36. },
  37. fail: (res) => {
  38. console.log(JSON.stringify(res))
  39. }
  40. });
  41. }
  42. },
  43. switchTab() {
  44. my.switchTab({
  45. url: '/page/tabBar/component/index',
  46. success: () => {
  47. my.showToast({
  48. content: 'Succeeded',
  49. type: 'success',
  50. duration: 4000
  51. });
  52. }
  53. }
  54. );
  55. },
  56. })
  1. /* API-DEMO page/API/navigator/navigator.acss */
  2. button + button {
  3. margin-top: 20rpx;
  4. }

Parameters

The parameters are of Object type, with attributes as follows:

Parameter Type Required Description
url String Yes The application for thejumping does not include the destination page path of the tabBar. The path can be followed by parameters.
Rules for the parameters: The path and parameter are separated with “?”, the parameter key and the parameter value are connected with “=”, and different parameters must be separated with “&”, such as path?key1=value1&key2=value2.
success Function No Callback function upon call success.
fail Function No Callback function upon call failure.
complete Function No Callback function upon call completion (to be executed upon either call success or failure).

my.navigateBack

Close the current page and return to the previous one or upper-level page. It is possible to use getCurrentPages to get the current page stack information and decide how many levels to return.

See Route related FAQs to learn more.

Effect

navigateBack

Sample code

  1. // API-DEMO page/API/navigator/navigator.json
  2. {
  3. "defaultTitle": "page redirection"
  4. }
  1. <!-- API-DEMO page/API/navigator/navigator.axml-->
  2. <view class="page">
  3. <view class="page-section">
  4. <button type="primary" onTap="navigateTo">Navigate to new page</button>
  5. <button type="primary" onTap="navigateBack">Return to previous page</button>
  6. <button type="primary" onTap="redirectTo">Open on the current page - obtain user information</button>
  7. <button type="primary" onTap="switchTab">Navigate Tab - component</button>
  8. <view class="page-description">This Demo only provides instructions on APIs, not covering mini program redirection function. To learn about the mini program redirection, see the relevant documents.</view>
  9. <button type="primary" onTap="navigateToMiniProgram">Navigate to mini program</button>
  10. <button type="primary" onTap="navigateBackMiniProgram">Navigate back to mini program</button>
  11. </view>
  12. </view>
  1. // API-DEMO page/API/navigator/navigator.js
  2. Page({
  3. navigateTo() {
  4. my.navigateTo({ url: '../get-user-info/get-user-info' })
  5. },
  6. navigateBack() {
  7. my.navigateBack()
  8. },
  9. redirectTo() {
  10. my.redirectTo({ url: '../get-user-info/get-user-info' })
  11. },
  12. navigateToMiniProgram() {
  13. if (my.canIUse('navigateToMiniProgram')) {
  14. my.navigateToMiniProgram({
  15. appId: '2017072607907880',
  16. extraData: {
  17. "data1": "test"
  18. },
  19. success: (res) => {
  20. console.log(JSON.stringify(res))
  21. },
  22. fail: (res) => {
  23. console.log(JSON.stringify(res))
  24. }
  25. });
  26. }
  27. },
  28. navigateBackMiniProgram() {
  29. if (my.canIUse('navigateBackMiniProgram')) {
  30. my.navigateBackMiniProgram({
  31. extraData: {
  32. "data1": "test"
  33. },
  34. success: (res) => {
  35. console.log(JSON.stringify(res))
  36. },
  37. fail: (res) => {
  38. console.log(JSON.stringify(res))
  39. }
  40. });
  41. }
  42. },
  43. switchTab() {
  44. my.switchTab({
  45. url: '/page/tabBar/component/index',
  46. success: () => {
  47. my.showToast({
  48. content: 'Succeeded',
  49. type: 'success',
  50. duration: 4000
  51. });
  52. }
  53. }
  54. );
  55. },
  56. })
  1. /* API-DEMO page/API/navigator/navigator.acss */
  2. button + button {
  3. margin-top: 20rpx;
  4. }

Parameters

The parameters are of Object type, with attributes as follows:

Parameter Type Required Default Description
delta Number No 1 Number of pages to return. If delta is greater than the number of open pages, it returns to the home page.
  • Q: When I use my.navigateTo or my.redirectTo for redirecting the page, why the page does not show the tabBar at the bottom?
    A: If you redirect to the page through command (my.navigateTo) or command (my.redirectTo), the page will not show tabBar at the bottom even defined in tabBar configuration. To redirect to the tab, use the my.switchTab method.

  • Q: Does my.navigateTo support parameter input?
    A: Yes.
    Parameter rule: Use between the path and the parameter “?” Concatenate the parameter key and the parameter value with “=”, and separate different parameters with “&”.
    Example: path? key1=value1&key2=value2

  • Q: Can I remove the Back button in the upper-left corner when I use my.redirectTo for page redirection?
    A: When the page stack depth is 1, you cannot see the Back button in the upper-left corner of the target page after you use my.redirectTo.

    • We recommend that you determine the peak page stack depth through the getCurrentPages method.
    • Alternatively, use my.reLaunch for redirection. When you use my.reLaunch for redirection, you cannot redirect to the tabBar page.
  • Q: The mini program has been redirected many times by using my.navigateTo. However, the redirection fails after another a few attempts. Why?
    A: The maximum page stack depth for mini programs is 10. It is recommended that you determine the peak page stack depth through getCurrentPages and use redirection for page jumping when the maximum depth is exceeded.

  • Q: Can I hide the Back button in the navigation bar of the mini program?
    A: No, the Back button always appears due to the hierarchy. You can hide the Back button through the my.reLaunch method to close all current pages and redirect to this page.