1、router路由编程式传参,一般两种方式。一种是query传参,另外一种则是params传参。由于params传参刷新页面,会导致数据丢失。所以采用query传参方式比较多,但当使用query传递对象,数组时,刷新页面会报[object Object],数据无法使用。

2、所遇问题:

首先打印下要传递的对象数据
在这里插入图片描述
这是要传递的参数,先正常传参
在这里插入图片描述
在详情页接受参数
在这里插入图片描述
控制台打印的数据,第一次可以接收到
在这里插入图片描述
f5刷新页面,控制台打印
在这里插入图片描述
单条数据可以无影响,对象无法获取,变为[object Object]。

3、解决方法

先使用JSON.stringify()转为字符串,字符串为单条数据,刷新页面数据就不会丢失,再将字符串通过JSON.parse()转回来就可以。

  handelDetails(row) {
      this.$router.push({
        path: "details",
        query: {
          row: JSON.stringify(row),//先转为字符串
          sataus: "Editor",
        },
      });
    },
  created() {
    // 接受传递的参数
    console.log(this.$route.query.sataus, '单条数据')
    console.log(JSON.parse(this.$route.query.row), '对象数据');//转为对象
  },

刷新页面,对象数据不会[object Object]
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐