vue路由传参

本文主要是介绍vue路由传参，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在做添加购物车功能时，遇到了这样一个问题：选择商品属性和购买数量后点击添加购物车，跳出添加成功界面，该界面会对商品信息进行显示，在由物品详情页面（Detail组件）跳转至添加成功页面（AddCartSuccess组件）时需要路由传参。

 

 

 当传递的是一些简单的数据时，如一个字符串，直接使用query即可（此处的skuNum是商品购买数量）

this.$router.push({name:'addcartsuccess',query:{skuNum:this.skuNum}});

 

 

 当需要传递的是复杂数据时（比如下面的skuInfo是一个对象），我们可以考虑本地存储/会话存储，本地存储除非特意删除，不然一直保留，最多存5M，而会话存储不持久化，会话结束数据消失，适用于此处。

由于本地存储/会话存储一般存储的都是字符串，所以我们要把skuInfo转换为字符串形式

sessionStorage.setItem("SKUINFO",JSON.stringify(this.skuInfo));

这样，我们就通过路由传参将转换后的skuInfo传递给了AddCartSuccess组件，但若想正常使用，我们要在AddCartSuccess组件中通过计算属性吧skuInfo再转换为对象形式

computed:{       //将Detail组件的addShopCar函数中的会话存储中被转换为字符串形式的skuInfo再转换回对象，进而使用       skuInfo(){         return JSON.parse(sessionStorage.getItem('SKUINFO'))       }     } skuNum

这篇关于vue路由传参的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！