[Vue]Pass Object as Router Params, 라우트 파라미터로 오브젝트 넘기기

Intro

Vue에서는 다른 페이지로 이동하기 위해 Vue Router를 사용합니다. Router를 사용하다 보면 단순히 페이지만을 옮기는 게 아닌 데이터도 함께 옮기고 싶은 때가 있습니다. 그럴 때를 위해 query와 params를 Vue Router는 준비해 두었죠. 하지만 요게 요게 맘대로 안 될 때가 있습니다. 바로 Object 형식의 데이터를 옮기고 싶을 때 말이죠.

Result

// PUSH
const router = useRouter()
router.push({
  name: 'xxx',
  params: {
    'A': JSON.stringify({
      stringify: 'JSON.stringfy',
      GOOD: 'So GOOD!!!'
    })
  }
})

 

// RECEIVE
const route = useRoute()
const param = JSON.parse(route.params.A)

// param = { stringify: 'JSON.stringfy', GOOD: 'So GOOD!!!' }

 

해답은 JSON.stringfy와 JSON.parse입니다.

하나의 오브젝트를 보낸다면 위의 모습으로 충분할 겁니다. 하지만 Array에 복수의 Object를 담아 보낸다면 각각의 Object들을 JSON.stringfy 처리하고, 받을 때도 마찬가지로 각각의 Object에 JSON.parse 처리를 진행해야 됩니다.

저는 Vue3를 기준으로 작업했지만 혹시 Vue2를 쓰신다면 $route를 활용하시면 나머지는 동일합니다.

 

전체 소스 코드는 이곳에서 확인 가능하십니다.

주저리주저리

해놓고 보니 너무 간단한건데 생각보다 구글에 자료가 검색되지 않아 고생했네요.