【路由带参跳转】解决带参跳转到别的页面然后刷新页面参数就会丢失问题

• 使用vue做了一个路由带参跳转页面，点击然后触发handleEditDevice函数，进行路由跳转，代码如下：
  跳转并传参：

 /** 设备详情按钮 */
    handleEditDevice(item) {
      item = item === 0 ? null : item
      /*完成页面跳转，待优化*/
      this.$router.push({
        name: 'device-DeviceBase',
        query: {
          item: item,
          pageNum: this.queryParams.pageNum
        }
      })
    },

接收代码：

 created() {
    this.item = this.$route.query.item;
    console.log(this.$route)
    this.getList(this.item);
  },

• 顺便打印一下route得路由信息如下
  

• 到这里一切都是正常得，正常传参，正常取值，但是当刷新当前页面得时候，会发现参数丢失了，无法获取到参数，如下图：
  

• 可以看到获取到得参数变成了[object Object]，参数并没有丢失，只是无法解析了，接下来说一下解决方法。

解决方法：

• 因为在路由带参的过程中不能直接带对象，要先转成字符串，再接受页面再转回对象，下面上代码：

参数item用JSON.stringify(item)转为字符串

/** 设备详情按钮 */
    handleEditDevice(item) {
      item = item === 0 ? null : item
      /*完成页面跳转，待优化*/
      this.$router.push({
        name: 'device-DeviceBase',
        query: {
          item: JSON.stringify(item),
          pageNum: this.queryParams.pageNum
        }
      })
    },

接收得地方再用JSON.parse(this.$route.query.item)转为对象即可

 created() {
    this.item = JSON.parse(this.$route.query.item);
    console.log(this.$route)
    this.getList(this.item);
  }

我们直接运行刷新看一下效果：
ok！至此搞定。