在地址栏传递对象做参数

2019-06-16  本文已影响0人  梁庄十年

通过url传递对象参数

在组件中定义需要传递的对象参数:

<template>
    <a :href="'http://www.baidu.com?sendParams=' + JSON.stringfy(sendParams)">  
    </a>
</template>
< script>
  export defaut {
      data() {
            return {
                 sendParams:{
                     name:'jack',
                     age:'12',
                     job:'工程师',
                     salary:1200,
                }   
             }
      }
}
</script>

在另一个组件中获取地址栏的参数


<script>
    created() {
       //获取url带过来的参数
        let query = window.location.href.split('?')[1]  
        //因为参数中有时候会含有中文,会变成乱码,此时需转码
        query = decodeURI(query)
        //获取转码后的参数
        var tempObj = query.split('=')[1]
        //将获取的tempObj打印出来会发现,冒号全变成了%3A,此时可以用正则替换
        tempObj = tempObj.replace(/%3A/g,':')     
        //再将JSON字符串转为js对象即可
        var recUrlParams = JSON.parse(tempObj)
        console.log(recUrlParams)
    }
</script>

在控制带打印出来的结果 ,如下所示:

image.png

注:
除了这种方法之外,还可以用base64这种方法,先对对象编码,再解码,大概思路如下:

// 发送方
var sendObj = Base64.encode(JSON.stringify(sendObj))
// 接受方
var recObj = JSON.parse(Base64.decode(sendObj))
上一篇 下一篇

猜你喜欢

热点阅读