vue-路由传参，页面刷新参数不丢失

背景：点击列表的编辑按钮时，传递当前行数据，在编辑页面接收回显，再调取一个接口去渲染右边的表格。但是接口反应可能比较慢，用户可能直接刷新浏览器，要求在刷新页面的时候传递过来的数据不丢失。

1、query传参----普通类型

handleEdit(row) {
    this.$router.push({
        path: '/tmall/111/autoCreate',
        query: {
            id: row.id
        }
    })
},

可以看到浏览器进行了url参数拼接传参，类似get请求

watch: {
    '$route.query.id': {
        handler: function (val,oldval) {
            if(val) {
                this.params.id = val
                this.handleEdit();
            }
        },
        immediate: true
    },
}

此时，直接刷新浏览器，url参数不丢失，数据回显也正常。

2、query传参----传递对象

handleEdit(row) {
    this.$router.push({
        path: '/tmall/dataReport/autoCreate',
        query: {
            editData: row
        }
    })
},

当传递的参数类型为对象时，发现url路径中变成这样了

 强制刷新后打印参数

 这就是对象被强制转化为字符串的结果。

原因是vue路由传值会把参数都转换程字符串进行拼接，相当于string

解决方案：

传递参数时将参数转化为JSON字符串

editData: JSON.stringify(row) 

接收时再转换为对象：  console.log(JSON.parse(val));

此时，直接刷新浏览器，url参数不丢失，但是路径会把对象数据全部展示，暴露了参数

 总结：

• 若要传的参数是一个对象，请先用JSON.stringify(obj)方法转换;