uni-app路由传参(对象)接收时候为[object,object]踩坑

超、凢脫俗 2022-11-14 14:46 214阅读 0赞

## 路由传参\[object,object\] ##

需求：

点击动态传递参数，参数为当前对象

<view class="position_item" v-for="(item,index) in wshAddress" @click="toMap(item)">
    				<view class="position_item_title">慧慧</view>
    				<view class="position_item_content">
    					<view>经度：{ { item.longitude}}</view>
    					<view>纬度：{ { item.latitude}}</view>
    					<view>详细地址：{ { item.address}}</view>
    					<view class="time">{ { item.date}}</view>
    				</view>

刚开始我是这样传递的

methods: { 
    			toMap(item){ 
    				uni.navigateTo({ 
    					url:"../map/map?record="+item
    				})
    			},

在跳转界面接收

onLoad(record) { 
    			this.record=record.record
    			console.log(this.record)
    			
    		},

结果我拿到的只是\[object,object\]

![object][]  
直接点出属性为undefined

于是我想到了JSON.stringify()

结果：。。。。。。  
![在这里插入图片描述][20210330090626243.png]  
直接裂开，就【object,object】直接给加了个双引号？？？？想了好久，也没想明白问题出在哪儿。

最后，突然想到，可能是在传递中出现的问题，于是改变传递方法，在传递的时候，直接转为JSON字符串，

toMap(item){ 
    				uni.navigateTo({ 
    					url:"../map/map?record="+JSON.stringify(item)
    				})
    			},

传递页面
    onLoad(record) { 
    			this.record=record.record
    			console.log(this.record)
    			
    		},

再从新接收打印  
![成功][20210330091104453.png]  
成功！！！完美解决

[object]: /images/20221022/7aafaec397a142c39ae374980b30d48e.png
[20210330090626243.png]: /images/20221022/1b87e82ddb3f4458b890632db05cc319.png
[20210330091104453.png]: /images/20221022/60e06703a6264fc1be82a7c24f088f6c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-03-路由-路由传参

和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，

男娘i/ 2023年07月20日 13:40/ 0 赞/ 10 阅读

相关 vue路由传参

vue路由跳转页面传参 1、使用路由url携带参数传递主页Main.vue模板脚本 <template> <div class="hell

迷南。/ 2022年11月29日 13:28/ 0 赞/ 345 阅读

相关 uni-app路由传参(对象)接收时候为[object,object]踩坑

路由传参\[object,object\] 需求：点击动态传递参数，参数为当前对象 <view class="position_item" v-for="(

超、凢脫俗/ 2022年11月14日 14:46/ 0 赞/ 215 阅读

相关 angular 路由传参

cart.component.ts import { Component, OnInit } from '@angular/core'; import {Ro

偏执的太偏执、/ 2022年06月01日 06:54/ 0 赞/ 303 阅读

相关路由传参

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></titl

末蓝、/ 2022年06月01日 00:14/ 0 赞/ 335 阅读

相关 angular 路由传参

.state('xxxx', \{ url: 'xxxx', templateUrl: 'xxx.html', controller: 'xxxxController',

冷不防/ 2022年05月17日 23:16/ 0 赞/ 307 阅读

相关 vue路由传参

在vue中使用插件的步骤 1、引入Vue 2、引入插件 3、使用插件 Vue.use() 当路由配置成功以后Vue中就会多了两个内置组件 <router-view>

雨点打透心脏的1/2处/ 2021年10月26日 15:40/ 0 赞/ 480 阅读

相关路由传参和路由卫士

1.动态路由匹配动态路由也可以叫做路由传参。组件的显示内容经常会根据用户选择的内容不同来在同一个组件中渲染不同内容。那么在这个时候就需要动态路由。 1. 动态

古城微笑少年丶/ 2021年08月19日 15:06/ 0 赞/ 519 阅读

相关 uniapp navigateTo url路由传参(传递对象)

1、跳转页面 // 详情 myInInfoClick(obj) { uni.navigateTo({ url:'./compone

忘是亡心i/ 2021年07月25日 13:10/ 0 赞/ 1030 阅读

相关 rn 路由传参、navigation传参

路由传参: (1)传参数 (1)发送函数式传递 function xx({navigation

傷城~/ 2021年07月24日 16:57/ 0 赞/ 1333 阅读