[Vue] Vue Router 데이터 전달하기

페이지 이동 시 데이터를 전달해야하는 경우가 있습니다.

params, query, hash로 전달하게되면 url에 정보가 노출되기 때문에 보안에 취약합니다.

이러한 경우에는 state에 데이터를 담아 전달하면 됩니다.

import { useRouter } from 'vue-router'

const router = useRouter()

router.push({
  name: 'VueComponent',
  state: {
    name: '홍길동',
    age: '19',
  }
})

 

 

history 내장객체에 state가 저장되며 이동한 component에서 데이터를 사용할 수 있습니다.

console.log(history.state.name) // '홍길동'
console.log(history.state.age) // '19'