1. 常用方式
uni.navigateTo({
url:'/pages/index/test', //建议这么写
})
//或者
<navigator url="/pages/index/test" animation-type="pop-in">跳转</navigator>
2.情况1. 在当前页面跳转到test页面的时候 我希望传递一些参数
uni.navigateTo({
url:`/pages/index/test?id=${
this.id}&name=${
this.name}`, //建议这么写
})
test页面
export default{
onload(params){
// 参数就过来了
}
}
情况2. 在当前页面跳转到test页面的时候 我希望传递一个对象,明显你现在不能拼接了 你可能会想
uni.$emit('事件名称',object)
// 这不就好了么? 这种方式 适合当前页面被打开过一次,因为你需要
// 在mounted 里面接受, 我这个页面都没渲染过,我怎么接受??
// 正确方式
jumpTo(){
// 我们发的值一般是都是data区域的
uni.navigateTo({
url:`/pages/index/test`, //建议这么写
// 版本2.8.9+ 支持
success:(res)=>{
// 和上面其实没差什么,但是这种方式是可以的 这里不是$emit
res.eventChannel.emit('sendTestValue',{
info:this.info
})
}
})
}
test.vue 中 怎么接受呢
onload(){
// 别问我啥意思。这是官方文档提供的
this.page = this.getOpenerEventChannel();
// 你可以在这里直接接受,这里不是$on
this.page.on('sendTestValue',(data)=>{
// 这是data 就是上个页面传递的对象了
})
}
情况3. test 是一个页面并不是一个组件,对吧?但是我希望, 在这个页面操作一些东西之后
// 将操作后的值,发送给上个页面,这时候uni.$emit 就可以了, 还有简单写法,别急往下看
methos:{
// 假如说是这样的
sendBeforPage(){
// 但是这种方式 不好
uni.$emit('send',123);
},
// 这样写法,这个页面按钮点击之后
还记得 this.page吗?
sendBeforPage(){
this.page.emit('send',123)
}
}
// 那上个页面怎么接受?
还记的uni.navigateTo吗? // 你没看错就是在这里
methos:{
jumpTo() {
uni.navigateTo({
url: "/pages/index/test",
events: {
// 当你在test.vue将按钮点击的时候,这里就已经可以拿到值了
send(data) {
this.shareData = data;
},
}
})
}
}
uniapp 页面跳转 详细(如何传递对象)页面之间如何传值$emit, $on 时机。还有对应的新写法
猜你喜欢
转载自blog.csdn.net/weixin_45932463/article/details/120939482
今日推荐
周排行