Vue路由跳转如何传递一个对象过去？

最新推荐文章于 2024-07-27 11:33:23 发布
最新推荐文章于 2024-07-27 11:33:23 发布
阅读量5.2k 收藏 15
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sslcsq/article/details/106300254
版权

之前我开始写的时候在传递的一方使用JSON.stringify()去进行转换
然后在接收的一方使用JSON.parse()进行转换，这样的话会报错
在这里插入图片描述
这个是提示转换json对象方法没有成功看下json字符串是否正确
那么 如何解决？
首先在传的一方使用：JSON.stringify() 以及encodeURIComponent()进行转换

例如：

var arr=JSON.stringify(e)
this.$router.push("/details?obj="+encodeURIComponent(arr))

在接收的一方使用：decodeURIComponent() 以及 JSON.parse()进行转换

var list = decodeURIComponent(this.$route.query.obj);
console.log(JSON.parse(list));

这样的话就可以解决了这个报错信息
在这里插入图片描述

sslcsq
关注
vue路由跳转的方式与传递参数
weixin_45932733的博客
12-02 202
1.用<router-link>创建路由跳转 默认情况下与<a>标签效果相同 to为需要跳转到的位置 例子 // 1.to可以为一个字符串 <router-link to="home">Home</router-link> // 2.也可动态的绑定一个变量字符串 <router-link v-bind:to="'home'">Home</router-link> // 3.动态绑定一个对象 <router-link :to="
详解vue 路由跳转四种方式 (带参数)
12-29
1.  router-link 1. 不带参数 //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: /home/:id 或者 path: /home:id
vue路由传递对象
weixin_47826037的博客
03-10 5069
传参 var row = {id:2,name:1} this.$router.push({path: '/index', query: {row: encodeURIComponent(JSON.stringify(row))}}); 接收参数 console.log(JSON.parse(decodeURIComponent(this.$route.query.row)))
Vue中实现路由跳转传参的4种方式
最新发布
msq6678的博客
07-27 2816
Vue路由
路由跳转时传参（传对象）
weixin_56496578的博客
07-03 336
路由传参传对象
vue中路由跳转传递参数的三种方式
热门推荐
海阔天空
03-07 3万+
日常业务中，路由跳转的同时传递参数是比较常见的，传参的方式有三种： 1）通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //...
vue 路由传参为对象
冰冰酱
03-21 304
【代码】vue 路由传参为对象。
vue路由跳转传递参数的方式总结
10-15
本文将详细介绍Vue路由跳转时传递参数的三种主要方式，并分析它们的特点和适用场景。 1. 动态路由传参 动态路由是一种在路由路径中包含动态段的方法，通常用于表示具有唯一标识的数据项。在路由配置文件中，我们...
vue相同路由跳转强制刷新该路由组件操作
10-14
可以在路由跳转时添加一个动态查询参数，如当前的时间戳或随机数。在触发路由跳转的方法中，可以这样做： ```javascript this.$router.push({ path: "/xxx", query: { t: Date.now(), }, }); ``` 这将导致...
vue路由跳转时判断用户是否登录功能的实现
08-29
"vue路由跳转时判断用户是否登录功能的实现" 这篇文章主要讲解了如何在 Vue 中实现路由跳转时判断用户是否登录的功能。下面我们将详细讲解该功能的实现步骤： Step 1: 使用 Vuex 管理用户登录状态 在实现用户登录...
路由跳转的四种方式
rfalcon的博客
10-21 2412
query和params区别 query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失 1.router-link 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行,
关于跳转传递对象
yunlv5007的博客
12-30 502
各位大神小弟有一事很是费解，贴出代码 activity1：case 4:// 点名、40秒刷新一次地理位置 Bundle mBundleRollCallGPS = new Bundle(); mBundleRollCallGPS.putSerializable("user", user); if (userType == 1) { // 企业用户访问 teuid = sp .getS
Vue实战——路由跳转传值
小葵坤_易安的博客
07-15 370
一、功能需求 点击如下图所示的 “转账到账时间”，进入新界面选择到账类型。 选择完成之后跳转到上一个路由，并在界面中进行相应展示。如下图所示，在选择界面选择了 “实时到账”，在该界面进行展示。 二、代码展示 其中使用了 Mint-UI 中的 Checklist：https://mint-ui.github.io/docs/#/en2/checklist TransferTime.vue <template> <div id="transfertime"> &
vue路由传参使用query传递对象
m0_50981596的博客
07-17 348
【代码】vue路由传参使用query传递对象。
vue 跳转页面带对象_vue跳转方式（打开新页面）及传参操作示例
weixin_29119159的博客
12-29 731
本文实例讲述了vue跳转方式(打开新页面)及传参操作。分享给大家供大家参考，具体如下：1tj免费资源网1. router-link跳转1tj免费资源网// 直接写上跳转的地址link跳转// 添加参数// 参数获取id = this.$route.query.id// 新窗口打开2. this.$router.push跳转1tj免费资源网toDeail (e) {this.$router.push...
一文详解Vue中实现路由跳转传参的4种方式（十分详尽）
青春木鱼的博客
08-01 2万+
在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击 a标签链接。vue项目中点击router-link标签链接都属于声明式导航。在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：普通网页中调用location.href跳转到新页面的方式，属于编程式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()。
vue 传递 对象 路由_详解vue路由
weixin_31721961的博客
01-30 1402
前端路由和后端路由：后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源前端路由：对于单页面应用程序来说，主要通过url的hash(#)来实现不同页面的切换，同时hash还有一个特点HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由路由的使用1.创建一...
vue路由传递对象，使用JSON对象
qq_59626859的博客
11-15 2919
vue路由传递对象，使用JSON对象
记录vue路由传递对象
qq_43021088的博客
09-11 6294
(ps：此条仅作为个人记录) vue路由传递一个对象作为参数的时候，不使用JSON.stringify和JSON.parse，接收参数的页面刷新后，接收的对象会变为[object Object] 错误示范1：(未使用JSON.stringify和JSON.parse) //传参页面 look(row){ this.$router.push({ path: './createProject', query:{allData: row} //row是一个对象 }).
vue路由跳转传递参数
08-11
在Vue中，可以使用路由跳转时传递参数的方式有多种，下面我会介绍其中两种常用的方法： 1. 使用动态路由参数： 在Vue的路由配置中，可以定义动态的路由参数，然后在路由跳转时将参数传递给目标组件。例如，在路由配置中定义一个动态参数，比如:id，然后在跳转时通过在路径中添加对应的值来传递参数。示例代码如下： ```javascript // 定义路由配置 const routes = [ { path: '/user/:id', name: 'User', component: User } ]; // 跳转时传递参数 this.$router.push({ name: 'User', params: { id: userId } }); ``` 在目标组件中，可以通过`$route.params`来获取传递的参数： ```javascript export default { mounted() { const id = this.$route.params.id; // 使用id参数进行相应的操作 } } ``` 2. 使用查询参数： 另一种常用的方式是使用查询参数来传递参数。在路由跳转时，可以通过`query`选项传递参数。示例代码如下： ```javascript // 跳转时传递参数 this.$router.push({ path: '/user', query: { id: userId } }); ``` 在目标组件中，可以通过`$route.query`来获取传递的参数： ```javascript export default { mounted() { const id = this.$route.query.id; // 使用id参数进行相应的操作 } } ``` 这两种方法可以根据具体的需求选择使用，使用动态路由参数可以在URL中显示参数，而使用查询参数则不会改变URL路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值