vue路由传递对象，使用JSON对象

暴富的im

已于 2023-06-04 18:37:06 修改

阅读量2.9k

点赞数 1

分类专栏：实习问题-vue 文章标签：前端 vue.js javascript json

于 2022-11-15 16:53:16 首次发布

本文链接：https://blog.csdn.net/qq_59626859/article/details/127868489

版权

实习问题-vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了在前端开发中，如何通过路由传递对象参数。当需要将对象从一个页面传递到另一个页面时，必须将其转换为JSON字符串。在主页面，使用`JSON.stringify()`将对象转为JSON，然后通过路由查询参数传递。在编辑页面，接收到的数据是字符串，需要使用`JSON.parse()`还原成对象。此过程对于正确地在不同页面间传递复杂数据至关重要。

摘要由CSDN通过智能技术生成

场景：

点击编辑按钮，通过路由跳转到编辑页面，同时将当前行的内容通过路由传参传给编辑页面。

由于数据是一个对象，类似于：

我最开始是：

//主页面
if (id.prevRow) {

//1.id.row就是上图所示的数据

    const data = id.row
    console.log('我要去编辑页面 ')
    router.push({
      path: '/system/role/add',
      query: {
        data: data
      }
    })
  }

//编辑页面

//route.query接收路由传的参数
if (route.query.data) {
    // 编辑页面
    form = route.query.data
    show = false
  }

结果接收到的数据为：只有类型没有数据

需要将对象转化为JSON对象才可以

//主页面
JSON.stringify将对象转为json对象
if (id.prevRow) {
    const data = JSON.stringify(id.row) 
    router.push({ 
      path: '/system/role/add',
      query: {
        data: data
      }
    })
  }

//编辑页面
JSON.parse将json对象转为对象
 if (route.query.data) {
    // 编辑页面
    form = JSON.parse(route.query.data)
    show = false
  }