一、路由跳转的几种方式
// 参数
var Object = {
url: '',
delta: 1, // 返回的页面数,如果 delta 大于现有历史页面数,则返回到首页。(只有 wx.navigateBack 生效)
success: function(){},
fail: function(){},
complete: function(){},
}
// 保留当前页面、跳转到某个页面
wx.navigateTo(Object);
// 关闭当前页面,并返回到上一级页面或上多级页面(返回到历史页面)
wx.navigateBack(Object);
// 关闭当前页面,跳转到某个页面
wx.redirectTo(Object);
// 关闭所有页面,打开某个页面,返回的时候跳到首页
wx.reLaunch(Object);
// 关闭所有页面,跳转到 tabBar 页面
wx.switchTab(Object);
二、由跳转传参和获取路由参数
1. 传参方式一:通过在 url 后拼接字符串的方式发送参数
- 定义 wxml 模板页面
<view class="container">
<view bindtap="fnOpenDetail" data-id="1"> 跳转到指定页面 </view>
</view>
- 定义 js 页面
Page({
fnOpenDetail: function (e) {
wx.navigateTo({
url: "/pages/detail/index?id=" + e.currentTarget.dataset.id + "&title=标题",
success: function (res) {},
fail: function (err) {},
complete: function () {},
});
},
});
- 在目标页面的 onLoad 函数中获取路由参数
Page({
onLoad(options) {
console.log(options.id, options.title);
},
});
2. 传参方式二:通过事件发送和获取参数
- 定义 wxml 模板页面
<view class="container">
<view bindtap="fnOpenDetail" data-id="1"> 跳转到指定页面 </view>
</view>
- 定义 js 页面
Page({
fnOpenDetail: function (e) {
wx.navigateTo({
url: '/pages/detail/index',
success: function(res) {
const data = {
id: e.currentTarget.dataset.id,
title: '标题',
}
// 发送事件,携带参数
res.eventChannel.emit('acceptDataFromOpenerPage', { data })
},
fail: function(err) {},
complete: function() {},
})
},
})
- 在目标页面的 onLoad 函数中获取路由参数
Page({
onLoad(options) {
const eventChannel = this.getOpenerEventChannel()
// 监听事件,获取参数
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data.data.id,data.data.title)
})
}
})
网友评论