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,skuNum,skuInfo,AddCartSuccess,组件,路由
来源： https://www.cnblogs.com/ruanyingao/p/16142675.html