WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
系统注册表系统命令DOSWin8
存储光存储键盘鼠标
内存维修打印机维修
WinXPVistaWin7linux
硬件综合机箱电源/散热器手机数码
主板维修CPU维修键鼠维修网页设计
办公教程ExcelWordPowerPointWPS
网络工具系统工具图像工具
PS教程数据库局域网服务器
PHP教程CSSjavascriptXML

Vue路由params、query参数丢失解决

更新时间:2021-04-14 11:15 作者:六卿点击:
在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字符串再格式化的方法解决
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容