|
在vue中路由传参有两种形式：1.params；2.query
解决办法：sessionStorage或者localStorage
两者的区别：localStorage是永久保存不清除一直存在,sessionStorage关闭客户端即清除
首先有两个页面，通俗点页面一和页面二；
页面一给页面二传递路由参数
params参数
this.id = 666
this.$router.push({
name: '页面二',
params: {
id: this.id
}
})
在页面二获取参数id
let id = this.$route.params.id
console.log(id) //666
id为我们传送的666；
但是，我们刷新页面的话，就会造成参数丢失的问题，
console.log(id) //undefined
解决
页面一
this.id = 666
sessionStorage.setItem('id',this.id )
this.$router.push({
name: '页面二',
params: {
id: this.id
}
})
页面二
let id = this.$route.params.id!=undefined ? this.$route.params.id : sessionStorage.getItem('id')
console.log(id) //666
query参数
let obj={
id:666,
Ma:{
name:'小马'
}
}
this.$router.push({
path:"/Echartss",
query:obj
})
在页面二
console.log(this.$route.query.id,'this.$route.query.id') //666
console.log(this.$route.query.Ma,'this.$route.query.Ma') //{name:'小马'}
刷新页面后
console.log(this.$route.query.id,'this.$route.query.id') //666
console.log(this.$route.query.Ma,'this.$route.query.Ma')//[object Object]
就获取不到name的值
解决
页面一
let obj = {
id: 666,
Ma: {
name: "小马"
}
};
sessionStorage.setItem("obj", JSON.stringify(obj));
this.$router.push({
path:"/Echartss",
query:obj
})
页面二
let id = this.$route.query.id!=undefined ? this.$route.query.id : JSON.parse(sessionStorage.getItem('obj')).id
let Ma = this.$route.query.Ma.name!=undefined ? this.$route.query.Ma : JSON.parse(sessionStorage.getItem('obj')).Ma
console.log(id) //666
console.log(Ma) //{name:"小马"}
通过JSON将对象变成json字符串再格式化的方法解决
|
