uni-app路由传参(传递对象 )

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>