2021/03/03之Vue路由params、query参数丢失解决

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