同级传参的两种方式
1.query穿参,或者params传参
使用 this.$router.push({path: '/', query: {参数名: '参数值'})
this.$router.push({name: '/', params: {参数名: '参数值'})
注意1: 使用params时不能使用path
接收: var a = this.$route.query.参数名
var b = this.$route.params.参数名
注意2:实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题。
栗子:由A向B 跳转
在A列表跳转页
//点击事件 goToSDetails:function (id) { this.$router.push({ path:'./release', query:{ nameId:this.list[id].nameCn}, }) },
B详情页
created:function(){ this.getParams(); }, watch: { // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可 '$route': 'getParams' }, methods:{ getParams:function(){ // 取到路由带过来的参数 var routerParams = this.$route.query.nameId // 将数据放在当前组件的数据内 console.log("传来的参数=="+routerParams) this.textareText = routerParams }, }
二,下面也可以,不过还没试,先记录下来:
vue 组件之间使用eventbus传值:
链接:https://jingyan.baidu.com/article/72ee561a09027be16138dfd5.html
三、通过设置 Session Storage缓存的形式进行传递(这是摘抄别人的,自己记录一下)
①两个组件A和B,在A组件中设置缓存orderData
const
orderData
=
{
'orderId'
:
123
,
'price'
:
88
}
sessionStorage
.
setItem
('缓存名称'
,
JSON
.
stringify
(
orderData
))
②B组件就可以获取在A中设置的缓存了
const dataB = JSON
.
parse
(
sessionStorage
.
getItem
('缓存名称'
))
此时 dataB 就是数据 orderData
朋友们可以百度下 Session Storage(程序退出销毁) 和 Local Storage(长期保存) 的区别。
原链接:https://blog.csdn.net/qq_35430000/article/details/79291287