参考官网:https://uniapp.dcloud.io/api/router.html
1. uni.navigateTo 保留当前页,跳转到应用内的某个页面
注意: url 的路径必须以 / 开始
跳转并传参
uni.navigateTo({
// 方式一:此方式传参,刷新页面参数不丢失,参数在url上显示
// 如果是对象或者数组参数可使用 JSON.stringfy(),将参数转化成字符串,然后获取时,通过 JSON.parse() 转化成对象
url: '/pages/page1/page1?id=1&name=橙子',
// 方式二:通过eventChannel向被打开页面传送数据,此方式传参,刷新页面参数会丢失
// 此方式只是适合 uni.navigateTo() 方法
success: function(res) {
res.eventChannel.emit('argParams', {
id: '100',
name: '菠萝'
})
}
})
在目标页面获取参数
onLoad: function(option) {
//方式一:接收参数
console.log(option);
//方式二:接收参数
// #ifdef APP-NVUE
const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
// #endif
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
eventChannel.on('argParams', function(data) {
console.log(data)
})
},
2. uni.redirectTo 关闭当前页,跳转到应用内的某个页面
跳转并传参
uni.redirectTo({
url: '/pages/page1/page1?id=1&name=橙子',
success: function(res) {
console.log(res)
}
})
在目标页面获取参数
onLoad: function(option) {
console.log(option.id);
console.log(option.name);
},
3. uni.reLaunch 关闭所有页面,打开到应用内的某个页面
跳转并传参
uni.reLaunch({
url: '/pages/page2/page2?id=1&name=榴莲',
success: function(res) {
console.log(res)
}
})
在目标页面获取参数
onLoad: function(option) {
console.log(option.id);
console.log(option.name);
},
4. uni.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
跳转并传参
uni.switchTab({
url: '/pages/index/index',
success: function(res) {
console.log(res)
getApp().globalData.paramsData={
id: 99,
name: '橘子'
};
}
})
在目标页面获取参数
onLoad: function(option) {
console.log(getApp().globalData.paramsData)
},
5. uni.navigateBack 关闭当前页面,返回上一页面或多级页面
返回到 tabbar 底部页面不要用navigateBack,要使用switchTab。
返回上级并传参
uni.$emit('emitParams',{msg:'$emit参数'})
uni.navigateBack({
delta: 1 // 返回的页面数,如果 delta 大于现有页面数,则返回到首页
});
在目标页面接收参数
onLoad() {
uni.$on('emitParams',data => {
console.log(data)
})
}
6. uni.preloadPage 预加载页面,是一种性能优化技术
uni.preloadPage({url: "/pages/test/test"})