[Vue] vue-router 이동후 새로고침시 전달한 데이터 유지 하기

router 이동 시 데이터 전달에는 두 가지 방법이 있다.

• params
• query

나는 이전에 뭣도 모르고 그냥 params만 사용했었다.
주로 router 이동 시 javascript 안에서 router push를 사용했기 때문에 아래 예시 처럼 사용했다.

params 예시

//Example.vue
/* VueRouter를 router로 선언하여 사용함. */

clicked() {
  this.$router.push({ name: "HelloWorld", params: {data : "Hello"}})
}

//HelloWorld.vue
/* path를 component 별로 정의할 때 'props: true'를 하면 props에 전달하여 바로 data로 사용할 수 있다. */

<script>
  export default {
    name: 'HelloWorld',
    props: {
      data: {
        type: String,
        default: ""
      }
    },
    data: () => ({
      paramsData: null
    }),
    mounted() {
      this.paramsData = this.data /* this.$route.params.data 로도 사용가능 */
    }
  }
</script>

그런데 params를 사용하니 새로 고침시에 데이터 유지가 안되는 문제가 생겼다.
이때 데이터를 유지하기 위해서는 query를 사용해야 한다.

✅ Json 데이터 주고 받기
주기 : JSON.stringify(data), json을 string 형태로 변환.
받기 : JSON.parse(data), string을 json 형태로 변환.

query 예시

//Example.vue
clicked() {
  this.$router.push({ name: "HelloWorld", query: {data : JSON.stringify({message: "Hello"})}}) 
}
//HelloWorld.vue

<script>
  export default {
    name: 'HelloWorld',
    data: () => ({
      paramsData: null
    }),
    mounted() {
      this.paramsData = JSON.parse(this.$route.query.data)
    }
  }
</script>

이렇게 받은 데이터는 새로고침을 해도 url에 남기 때문에 없어지지 않는다.

params는 post, query는 get 이라고 생각하면 된다.