小程序路由跳转方式:
1, 生命式navigator跳转
<navigator url="/pages/camera/camera">非tabbar跳转</navigator>
<navigator url="/pages/tags/tags" open-type="redirect">非tabbar跳转</navigator>
<navigator open-type="switchTab" url="/pages/user/user">tabbar跳转</navigator>
<navigator url="/pages/index/index" open-type="reLaunch">任意跳转</navigator>
<navigator open-type="navigateBack">返回上一页</navigator>
<navigator open-type="exit" target="miniProgram">退出小程序</navigator>
2, 编程式导航跳转 非tabbar跳转 和 tabbar跳转
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面,使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateTo({
url: '/pages/event/event',
})
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
url: '/pages/douyu/douyu',
})
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({
url: '/pages/grammar/grammar',
})
关闭所有页面，打开到应用内的任意一个页面
wx.reLaunch({
url: '/pages/event/event',
})
小程序路由传值方式
1, url路径拼接传值 wx.navigateTo, 和 wx.redirectTo 和 wx.reLaunch 可以传值
发
wx.navigateTo({
url: '/pages/camera/camera?name=wuyifan&age=20',
})
接
onLoad(options){
console.log("camera1", options)
}
2, 自定义事件传值, 类似于vue中的bus总线传值, 只有wx.navigateTo这个API可以这样传
在跳转成功回调中使用res.eventChannel.emit发射自定义事件传值
发
wx.navigateTo({
url: '/pages/camera/camera',
success: res=>{
res.eventChannel.emit("myEvent", {name:'wuyifan'})
}
})
接
onLoad(options){
// 获取eventChannel对象(类似于vue中的bus对象), 接收自定义事件传值
var eventChannel = this.getOpenerEventChannel()
eventChannel.on("myEvent", data=>{
console.log("camera2", data)
})
},
