微信小程序页面导航

张智琦

已于 2024-03-18 17:36:27 修改

阅读量451

点赞数 10

分类专栏：微信小程序文章标签：微信小程序

于 2024-03-15 18:20:55 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35248327/article/details/136745262

版权

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了微信小程序中各种页面导航API的使用方法，包括navigateTo、redirectTo、switchTab、navigateBack和reLaunch，以及如何进行页面传参。同时指出了每个API的限制和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档

本文中所有代码均为简单示例，属性和参数细节见官方文档
指南 → 页面路由
 组件 → 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)
  }
})

注意事项

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