[vuejs] route를 통해 받은 중첩된 객체 param값, [Object object] 뜨는 문제 해결

 

Router를 이용하여 화면 전환을 하면서 데이터를 보내주는 경우

보통 아래와 같은 방식을 사용한다.

const pageNm = 'FileName';
const param = {};

const router = useRouter()
router.push({ name: pageNm, params: param });
})

 

그리고 받아오는 쪽은 route를 이용하여 전달받은 데이터를 꺼내 사용할 수 있다.

 

그런데, param에서 중첩된 객체를 보내니 받는 쪽에서 제대로 꺼내오지 못하는 문제가 발생했다.

예를 들어 아래와 같은 형식의 데이터를 보내면

 

• 데이터 송신 부분

const fileName = 'Page';
const param = {
        a : 'A',
        b : 'B',
        bundleData: {
          c : 'C',
          d : 'D',
        },
      };
      router.push({ name: fileName, params: param });

 

• 데이터 수신 부분

console.log(route.params.bundleData); //[Object object]

받아오는 쪽에서 해당 데이터를 꺼낼 때, [Object object] 라는 타입만을 명시해줄 뿐, 실제 데이터를 받아오진 못했다.

 

---

 

이를 해결하려면

보낼 때 각 Object에 JSON.Stringify로 한번 묶어서 보낸 후,

받을 때 각 Object에 JSON.parse 처리를 하면 된다.

 

중요한 것은 저 route.param 전체에 대한 JSON.parse 처리가 아닌, 개별 Object에 대한 처리이다.

 

---

변경 후 소스

• 데이터 송신 부분

const fileName = 'Page';
const param = {
        a : 'A',
        b : 'B',
        bundleData: JSON.stringify({
          c : 'C',
          d : 'D',
        }),
      };
      router.push({ name: fileName, params: param });

 

•  데이터 수신 부분

 route.params.bundleData = JSON.parse(route.params.bundleData);