• 下载
  • 社区

my.navigateTo

从当前页面,跳转到应用内的某个指定页面。可使用 my.navigateBack 返回到原来页面。小程序中页面栈最多十层。


my.navigateTo 和 my.redirectTo 不允许跳转到选项卡(tabbar)页面;若需跳转到 tabbar 页面,请使用 my.switchTab

相关问题请参见 路由FAQ


扫码体验

导航栏.jpeg


效果示例

导航栏5-5.png


示例代码

// API-DEMO page/API/navigator/navigator.json
{
    "defaultTitle": "页面跳转"
}


<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">跳转新页面</button>
    <button type="primary" onTap="navigateBack">返回上一页</button>
    <button type="primary" onTap="redirectTo">在当前页面打开 - 获取用户信息</button>
    <button type="primary" onTap="switchTab">跳转 Tab - 组件</button>
    <view class="page-description">本Demo不具备小程序跳转功能,仅展示 API 的使用,具体接入请参考小程序官方文档 API 的小程序相互跳转部分。</view>
    <button type="primary" onTap="navigateToMiniProgram">跳转到小程序</button>
    <button type="primary" onTap="navigateBackMiniProgram">跳回小程序</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: '成功',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})


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


入参

Object 类型,属性如下:

属性

类型

必填

描述

url

String

需要跳转的应用内非 tabbar 的目标页面路径 ,路径后可以带参数。


参数规则:路径与参数之间使用 ?分隔,参数键与参数值用=相连,不同参数必须用&分隔。


示例: path?key1=value1&key2=value2

success

Function

调用成功的回调函数。

fail

Function

调用失败的回调函数。

complete

Function

调用结束的回调函数(调用成功、失败都会执行)。