uni-app路由传参(传递对象 ):
遇到需要在navigaor
组件中传递对象参数到下一个页面的需求,传递对象时如果不是JSON.stringify
的话,接收到的对象会被转化成[object,object]形式。但是使用字符串化往往还会带来另一个问题,那就是超出规定的长度。那么怎么解决呢?方案如下,两步走:
1.使用encodeURIComponent以及JSON.stringify()方法对对象进行字符串化和编码,这样可以控制url参数的长度,参考示例代码
<navigator :url="'/pages/base/baseEdit/baseEdit?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
2.受信息的页面使用JSON.parse()以及decodeURIComponent()接收和解码参数。
onLoad(option){
const item = JSON.parse(decodeURIComponent(option.item));
}
完整转换方法源码如下:
<template>
<view @click="navBar()">
传递信息
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
navBar() {
let obj = {
name: '张三',
age: 20,
sex: '男',
school: '郑州大学'
};
// 加密传递的对象数据
let item = encodeURIComponent(JSON.stringify(obj))
uni.navigateTo({
url: '/pages/navbar/navbar?item=' + item
})
}
}
}
</script>
<template>
<view>
接受的信息
<view>
<text>{{userObj.name}}</text>
<text>{{userObj.age}}</text>
<text>{{userObj.sex}}</text>
<text>{{userObj.school}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userObj: {}
}
},
onLoad: function(option) {
// decodeURIComponent 解密传过来的对象字符串
const item = JSON.parse(decodeURIComponent(option.item));
this.userObj = item
}
}
</script>
网友评论