Skip to main content
Use this API to navigate to a new page within the Mini Program. The current page is preserved in the page stack, allowing users to return with my.navigateBack.

Parameters

PropertyTypeRequiredDescription
urlStringYesPage path with optional query parameters (format: path?key=value&key2=value2)
successFunctionNoCallback on success
failFunctionNoCallback on failure
completeFunctionNoCallback that always executes
The maximum page stack depth is 10. You can call navigateTo at most 10 times before needing to navigate back or use other navigation methods.

Code Example

Basic Navigation

my.navigateTo({
  url: 'pages/detail/detail'
});

With Query Parameters

my.navigateTo({
  url: 'pages/detail/detail?id=123&type=product'
});

Receiving Parameters

// In the target page
Page({
  onLoad(query) {
    console.log(query.id);   // '123'
    console.log(query.type); // 'product'

    my.alert({
      content: JSON.stringify(query)
    });
  }
});

With Callbacks

my.navigateTo({
  url: 'pages/checkout/checkout',
  success() {
    console.log('Navigation successful');
  },
  fail(err) {
    console.error('Navigation failed:', err);
    my.showToast({
      content: 'Failed to open page',
      type: 'fail'
    });
  }
});

Use Cases

Page({
  goToProfile() {
    if (this.data.isLoggedIn) {
      my.navigateTo({ url: 'pages/profile/profile' });
    } else {
      my.navigateTo({ url: 'pages/login/login' });
    }
  }
});

Important Notes

  • Cannot navigate to tab bar pages (use my.switchTab instead)
  • Query parameter values should be URL-encoded if they contain special characters
  • The current page is preserved and can be returned to with my.navigateBack

Differences from Other Navigation APIs

APIBehavior
my.navigateToOpens new page, keeps current page in stack
my.redirectToReplaces current page (cannot go back)
my.reLaunchCloses all pages, opens target page
my.switchTabNavigates to tab page only

my.navigateBack

Go back to previous page

my.redirectTo

Replace current page