官方文档
页面导航方式
- 声明式导航
在 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' })
页面传参
<navigator
open-type="navigate"
url="/pages/index/index?name=张智琦&age=18">
页面传参
</navigator>
wx.navigateTo({
url: '/pages/index/index?name=张智琦&age=18'
})
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 页面
代码仓库
代码仓库