在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字符串再格式化的方法解决

技术
©2019-2020 Toolsou All rights reserved,
Vue.js入门(五)---在vue中使用echarts词云Pandas统计分析基础_数据处理(DataFrame常用操作)element UI dialog点击dialog区域外会关闭dialog应届毕业生看过来!Java面试经典77问,看完离工作就不远了关于蓝桥杯大赛,你应该了解的那些事!mysql 分区-key分区(五)海康威视-嵌入式软件笔试题PHP Redis 监听过期的 key 事件C语言循环语句笔记详解以及练习-折半查找算法、猜数字游戏JVM概述