微信小程序 页面导航

官方文档

• 本文中所有代码均为简单示例，属性和参数细节见官方文档
  指南 → 页面路由
  组件 → navigator
  API → 路由

页面导航方式

• 声明式导航
  在 WXML 中使用 navigator 组件实现页面导航，示例代码如下：

<navigator
  open-type="navigate"
  url="/pages/index/index">
  声明式导航
</navigator>

• 编程式导航
  在 JS 代码中调用微信小程序 API 实现页面导航，示例代码如下：

wx.navigateTo({ url: '/pages/index/index' })

API

navigateTo 打开某个页面

<!-- 声明式导航 -->
<navigator
  open-type="navigate"
  url="/pages/index/index">
  navigateTo
</navigator>

// 编程式导航
wx.navigateTo({ url: '/pages/index/index' })

redirectTo 关闭当前页面，打开某个页面

<!-- 声明式导航 -->
<navigator
  open-type="redirect"
  url="/pages/index/index">
  redirectTo
</navigator>

// 编程式导航
wx.redirectTo({ url: '/pages/index/index' })

switchTab 打开 tabBar 页面

<!-- 声明式导航 -->
<navigator
  open-type="switchTab"
  url="/pages/tab/tab">
  switchTab
</navigator>

// 编程式导航
wx.switchTab({ url: '/pages/tab/tab' })

navigateBack 关闭当前页面

<!-- 声明式导航 -->
<navigator open-type="navigateBack">navigateBack</navigator>

// 编程式导航
wx.navigateBack()

reLaunch 关闭所有页面，打开某个页面

<!-- 声明式导航 -->
<navigator
  open-type="reLaunch"
  url="/pages/index/index">
  reLaunch
</navigator>

// 编程式导航
wx.reLaunch({ url: '/pages/index/index' })

页面传参

• 参数格式同 URL 的 query 参数格式

<!-- 声明式导航，传递参数 -->
<navigator
  open-type="navigate"
  url="/pages/index/index?name=张智琦&age=18">
  页面传参
</navigator>

// 编程式导航，传递参数
wx.navigateTo({
  url: '/pages/index/index?name=张智琦&age=18'
})

// 目标页面的 JS 文件
Page({
  // 接收参数
  onLoad(options) {
    const { name, age } = options
    console.log('onLoad', 'name:', name)
    console.log('onLoad', 'age:', age)
  }
})

注意事项

1. url必须以 “/” 开头
2. navigateTo 和 redirectTo 不允许打开 tabbar 页面
3. switchTab 打开 tabbar 页面时，会关闭所有非 tabbar 页面
4. reLaunch 可以打开普通页面和 tabbar 页面

代码仓库

代码仓库