Routing

my.switchTab

You can use this API to switch to a specified tab bar page, which closes all other non-tab bar pages.

For related questions, see Routing FAQ.

Code example

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

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

Input parameters

An object with the following properties:

tabBar configuration

items configuration:

Configuration example

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

my.reLaunch

You can use this API to close all current pages and navigate to a specified page in the application.

Version requirements: Base libraries 1.4.0 or later. If you use an earlier version, we recommend that you perform the steps in compatibility processing.

For related questions, see Routing FAQ.

Code example

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

Input parameters

An object with the following properties:

my.redirectTo

You can use this API to close the current page and navigate to a specified page in the application.

For related questions, see Routing FAQ.

Code example

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

For example, to navigate to the index page:

• Use an absolute path: The URL is /pages/index/index.

• Use a relative path: The URL is ../index/index.

Input parameters

The following table describes the properties of the Object.

my.navigateTo

You can use this API to navigate from the current page to a specified page within the application.

• You can use my.navigateBack to return to the original page.

• A miniapp can have a page stack of up to ten layers.

You cannot use my.navigateTo or my.redirectTo to navigate to tab bar pages. To navigate to a tab bar page, use my.switchTab.

For more information, see Routing FAQ.

Code example

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

<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">Navigate to a new page</button>
    <button type="primary" onTap="navigateBack">Return to the previous page</button>
    <button type="primary" onTap="redirectTo">Open in the current page - Get user info</button>
    <button type="primary" onTap="switchTab">Switch to Tab - Component</button>
    <view class="page-description">This demo does not support miniapp navigation. It only shows how to use the API. For specific integration details, see the miniapp-to-miniapp navigation section in the official API documentation.</view>
    <button type="primary" onTap="navigateToMiniProgram">Navigate to a miniapp</button>
    <button type="primary" onTap="navigateBackMiniProgram">Navigate back to a miniapp</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: 'Success',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

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

Input parameters

The following table describes the Object properties.

my.navigateBack

This API closes the current page and returns to a previous page. You can use getCurrentPages to obtain the current page stack and determine how many layers to go back.

For more information, see Routing FAQ.

Example code

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

<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">Navigate to a new page</button>
    <button type="primary" onTap="navigateBack">Return to the previous page</button>
    <button type="primary" onTap="redirectTo">Open in the current page - Get user info</button>
    <button type="primary" onTap="switchTab">Switch to Tab - Component</button>
    <view class="page-description">This demo does not support miniapp navigation. It only shows how to use the API. For specific integration details, see the miniapp-to-miniapp navigation section in the official API documentation.</view>
    <button type="primary" onTap="navigateToMiniProgram">Navigate to a miniapp</button>
    <button type="primary" onTap="navigateBackMiniProgram">Navigate back to a miniapp</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: 'Success',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})

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

Input parameters

An object with the following properties:

Routing FAQ

• Q: Why does the bottom tab bar not appear for pages navigated to using my.navigateTo or my.redirectTo?

  A: Pages opened with page navigation (my.navigateTo) or page redirection (my.redirectTo) do not display the bottom tab bar, even if the page is defined in the tabBar configuration. To navigate to a tab page, use the my.switchTab method.

• Q: Does my.navigateTo support passing parameters?

  A: Yes, it does. Parameter rules: Use ? to separate the path from the parameters. Use = to connect a parameter key and its value. Use & to separate different parameters. Example: path?key1=value1&key2=value2

• Q: Can I remove the back button in the upper-left corner when navigating with my.redirectTo?

  A: When the page stack depth is 1, a page opened with my.redirectTo does not have a back button.

  • You can use the getCurrentPages method to check the page stack depth.

  • Alternatively, you can use my.reLaunch to navigate. When using my.reLaunch, you cannot navigate to a tab bar page.

• Q: Why does my.navigateTo stop working after several navigations?

  A: A miniapp has a maximum page stack of 10 layers. You can use the getCurrentPages method to check the page stack depth. If the limit is exceeded, use page redirection.

• Q: Can the back button in the miniapp's navigation bar be hidden?

  A: Yes. The back button appears when the page stack has multiple layers. You can call the my.reLaunch method to close all current pages and navigate to the target page. As a result, the back button is not displayed.