美文网首页
uni-app路由传参(传递对象 )

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

作者: 吃肉肉不吃肉肉 | 来源:发表于2020-12-07 16:42 被阅读0次

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>

相关文章

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

    uni-app路由传参(传递对象 ): 遇到需要在navigaor组件中传递对象参数到下一个页面的需求,传递对象时...

  • vue传参

    一、路由传参 1.1、 明文传参 ( 特点:URL路径 显示传递的参数 ) 路由跳转: 传递参数 接收参数 1....

  • 34.vue路由跳转参数的携带

    1.路由简单单参数传递 路由的配置 传参 接收

  • vue路由传参方式、区别

    vue路由传参 比如有A、B 两个文件,A文件的数据要往B文件传递,这个时候就需要路由传参。 如何传参 首先找到A...

  • Python day38_Flask入门

    关于路由 路由传参 有时我们需要将同一类 URL 映射到同一个视图函数处理。这时我们可以使用路由传参: 路由传递的...

  • 动态路由

    路由动态传参 方法一 步骤1:在进行传参 分析:格式是定义一个对象,传路由的名称name...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • react路由传参、路由跳转方式

    普通路由传参的方式 search params 通过state dva路由跳转 .从props取出并传递histo...

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • 微信小程序路由传参

    路由传参常用方式有以下几种 1. 通过url传参 上面的方式的参数不能是对象,如果需要传对象,可以将对象转成jso...

网友评论

      本文标题:uni-app路由传参(传递对象 )

      本文链接:https://www.haomeiwen.com/subject/gujtgktx.html