In the case of routing parameter, [object Object], use JSON.parse() to report an error at the receiving place: Unexpected token o in JSON at position 1

1. Problem description

Click on the form of 维护表operation, to achieve new window jump, and with a parameter (type of object),
Insert picture description here

1. Functions of the original page:

    MaintainOperate(row) {
    
    
      console.log("传的row:", row);
      let link = this.$router.resolve({
    
    
        path: "/table-matain",
        query: {
    
    
          currTableItem: row
        }
      });
      window.open(link.href, "_blank");
    }

Insert picture description here

2. Target page (the page routed to table-matain):

  mounted() {
    
    
     console.log("接收方:", this.$route.query.currTableItem); // 打印结果为见图 [object,object]
  }

Insert picture description here

3. The code of the target page is changed (the page routed to table-matain):

  mounted() {
    
    
     console.log("接收方:", JSON.parse(this.$route.query.currTableItem)); // 加了JSON.parse导致报错
  }

Error:Error in mounted hook: "SyntaxError: Unexpected token o in JSON at position 1"

Two, the solution

When passing the query parameter, serialize the object, and when receiving the parameter, use JSON.parse() to turn it.

1. Functions of the original page:

  MaintainOperate(row) {
    
    
      let link = this.$router.resolve({
    
    
        path: "/table-matain",
        query: {
    
    
          currTableItem: JSON.stringify(row) // 序列化传递过去的对象
        }
      });
      window.open(link.href, "_blank");
    }

2. Target page (the page routed to table-matain):

  mounted() {
    
    
     console.log("接收方:", JSON.parse(this.$route.query.currTableItem)); // 用JSON.parse转一下
  }

success:
Insert picture description here

Guess you like

Origin blog.csdn.net/ddx2019/article/details/107759508