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

场景:

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

由于数据是一个对象,类似于:

vue路由传递对象,使用JSON对象_第1张图片

 我最开始是:

//主页面
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
  } 

你可能感兴趣的:(实习问题-vue,前端,vue.js,javascript,json)