router路由传参 刷新后数据无法获取 [object Object]

router路由跳转使用query传递参数刷新后数据无法获取

路由进行页面的跳转,使用query进参数传递,当参数是一个对象时,页面初次载入时数据可以成功获取,刷新页面后数据取不到。打印显示[object Object]

示例代码：

	this.$router.push({
        name: 'admin/',
        query:{
            obj:data.data,
        }
    })

初次获取参数：正常拿到数据

let obj = this.$route.query.obj
console.log(obj);
//正常显示  {obj: {…}}

刷新页面：拿不到数据

console.log(obj);
//获取不到内部数据 [object Object]

问题：

传递的参数 如果是普通格式没问题，如果是对象，刷新后不管是params 还是 query 都会消失

解决方案:

1. 使用JSON转译
   JSON.stringify（） 把对象变成字符串，然后再传递，没有问题。

   //传递参数：
   let obj = data.data;
   obj = JSON.stringify(obj);
   this.$router.push({
   	name: 'admin/',
       query:{
           obj: obj,
       }
   })
   //获取参数：
   let obj = JSON.parse(this.$route.query.obj);
   console.log(obj); //可以成功获取参数
   

   缺点:
   再次进行路由跳转时,需要再次传递该参数,否则会无法获取

2. 使用web存储
   HTML5 提供了两种在客户端存储数据的新方法：

   • localStorage - 没有时间限制的数据存储
   • sessionStorage - 针对一个 session 的数据存储

   //传递数据
   obj = JSON.stringify(obj);
   sessionStorage .setItem("obj",obj);
   
   //取出数据
   let obj = sessionStorage.getItem("obj");
   let obj =  JSON.parse(obj);
   console.log(obj);//注意JSON转译
   

   缺点:
   如果存储用户的身份信息,注意退出登录时清除数据

3. 使用全局变量
   以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块

   // 定义模块 global
   <script>
   	//定义
       let obj = {};
       //暴漏
       export default
       {
           obj
       }
   </script>
   

   使用：

   // 存储变量：
   import global from './global';//引入全局变量
   req({
       url: '/a/login',
       method: 'post',
       data: dataJson,
       type: 'json',
       contentType: 'application/json',
   }).then((resdata) => {
       console.log(resdata);
       global.obj =  resdata.data; //把数据存储在全局变量
       if (resdata.code === 200) {
           this.$router.push({
               name: 'admin/',
           })
       }
   });
   
   // 取出变量
   import global from './global';//引入全局变量
   console.log(global.obj);
   

   缺点:
   页面刷新,该参数会无法获取