Mobile Platform as a Service:Route

my.switchTab

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

Note:

See Route related FAQs to learn more.

Sample code

// app.json
{
  "tabBar": {
    "items": [{
      "pagePath": "page/home/index",
      "name": "Home"
    },{
      "pagePath": "page/user/index",
      "name": "User"
    }]
  }
}

//.js
my.switchTab({
  url: 'page/home/index'
})

Parameters

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

tabBar Configuration

configurations for items:

Sample configuration

// tabBar Sample configuration
{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "Home"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "Log"
      }
    ]
  }
}

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.

Sample code

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

Parameters

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

my.redirectTo

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

See Route related FAQs to learn more.

Sample code

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

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:

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.

Sample code

// API-DEMO page/API/navigator/navigator.json
{
    "defaultTitle": "page redirection"
}

<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">Jump to new page</button>
    <button type="primary" onTap="navigateBack">Return to previous page</button>
    <button type="primary" onTap="redirectTo">Open on the current page - obtain user information</button>
    <button type="primary" onTap="switchTab">Jump Tab - component</button>
    <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>
    <button type="primary" onTap="navigateToMiniProgram">Jump to mini program</button>
    <button type="primary" onTap="navigateBackMiniProgram">Jump back to mini program</button>
  </view>
</view>

// API-DEMO page/API/navigator/navigator.js
Page({
  navigateTo() {
    my.navigateTo({ url: '../get-user-info/get-user-info' })
  },
  navigateBack() {
    my.navigateBack()
  },
  redirectTo() {
    my.redirectTo({ url: '../get-user-info/get-user-info' })
  },
  navigateToMiniProgram() {
    if (my.canIUse('navigateToMiniProgram')) {
      my.navigateToMiniProgram({
        appId: '2017072607907880',
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  navigateBackMiniProgram() {
    if (my.canIUse('navigateBackMiniProgram')) {
      my.navigateBackMiniProgram({
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  switchTab() {
    my.switchTab({
        url: '/page/tabBar/component/index',
        success: () => {
          my.showToast({
            content: 'Succeeded',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

/* API-DEMO page/API/navigator/navigator.acss */
button + button {
  margin-top: 20rpx;
}

Parameters

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

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.

Sample code

// API-DEMO page/API/navigator/navigator.json
{
    "defaultTitle": "page redirection"
}

<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">Navigate to new page</button>
    <button type="primary" onTap="navigateBack">Return to previous page</button>
    <button type="primary" onTap="redirectTo">Open on the current page - obtain user information</button>
    <button type="primary" onTap="switchTab">Navigate Tab - component</button>
    <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>
    <button type="primary" onTap="navigateToMiniProgram">Navigate to mini program</button>
    <button type="primary" onTap="navigateBackMiniProgram">Navigate back to mini program</button>
  </view>
</view>

// API-DEMO page/API/navigator/navigator.js
Page({
  navigateTo() {
    my.navigateTo({ url: '../get-user-info/get-user-info' })
  },
  navigateBack() {
    my.navigateBack()
  },
  redirectTo() {
    my.redirectTo({ url: '../get-user-info/get-user-info' })
  },
  navigateToMiniProgram() {
    if (my.canIUse('navigateToMiniProgram')) {
      my.navigateToMiniProgram({
        appId: '2017072607907880',
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  navigateBackMiniProgram() {
    if (my.canIUse('navigateBackMiniProgram')) {
      my.navigateBackMiniProgram({
        extraData: {
          "data1": "test"
        },
        success: (res) => {
          console.log(JSON.stringify(res))
        },
        fail: (res) => {
          console.log(JSON.stringify(res))
        }
      });
    }
  },
  switchTab() {
    my.switchTab({
        url: '/page/tabBar/component/index',
        success: () => {
          my.showToast({
            content: 'Succeeded',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

/* API-DEMO page/API/navigator/navigator.acss */
button + button {
  margin-top: 20rpx;
}

Parameters

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

Route related FAQs

• 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.