在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字串再格式化的方法解決
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/266387.html
標籤：其他
下一篇：雙飛翼布局