[Vue] 페이지 이동 시 Router state로 객체 전달하기

 

Vue3 이후, this 및 $router 등에 접근할 수 없음에 따라 useRouter를 사용해서 페이지 전환을 한다.

https://router.vuejs.kr/guide/advanced/composition-api.html

Vue Router | Vue.js의 공식 라우터

 

보통 페이지 전환 시, URL을 통해 넘길 파라미터를 주고 받는다.

하지만 URL에 노출하고 싶지 않은 파라미터나 데이터타입이 객체인 데이터를 주고 받을 때,

useRouter 내부 state 에 접근하여 객체를 주고 받으면 된다.

 

params 또는 query로 데이터를 주고 받을 때는 다음과 같이 데이터가 URL에 남는다.

 

 

메인.vue

<script setup>
const router = useRouter()

const data = { name : "kang", age : 25 }

//상세페이지로 이동
const move = () => {
	router.push(
      {
        name: 'apps-detail-id', params: {id: 1 }, query : {data : JSON.stringify(data)}
      }
    )
}

</script>

<template>
    <section>
    	<v-card-text>메인 페이지</v-card-text>
        <v-btn @click="move">상세페이지</v-btn>
    </section>
</template>

 

객체 데이터를 넘길 때는 JSON 문자열로 파싱하여 보내주고, 

객체를 받는 상세 페이지 쪽에서 JSON.parse()를 이용해 다시 객체로 만들어준다.

 

아무튼, 다음과 같이 데이터를 넘겼다고 가정하면, 상세페이지의 URL은 다음과 같이 나온다.

 

http://localhost:8080/apps/detail/1?detailData={%22name%22:kang,%22age%22:25}

 

다음과 같이 내가 어떤 데이터를 주고 받고 있는지 노력하지 않아도 알 수 있다.

 

해당 객체 데이터를 감추고 페이지를 전환할 수 있도록 state를 사용해서 구현하자

 

메인.vue

<script setup>
const router = useRouter()

const data = { name : "kang", age : 25 }

//상세페이지로 이동
const move = () => {
	router.push(
      {
        name: 'apps-detail-id', params: {id: 1 }, state : {data : JSON.stringify(data)}
      }
    )
}

</script>

<template>
    <section>
    	<v-card-text>메인 페이지</v-card-text>
        <v-btn @click="move">상세페이지</v-btn>
    </section>
</template>

 

다음과 같이, state에 데이터를 담아서 페이지 이동을 할 경우 나오는 URL은 다음과 같다.

 

http://localhost:8080/apps/detail/1

 

다음은 상세 페이지에서 데이터를 가져오는 방법이다.

 

상세페이지.vue

 

<script setup>
const route = useRoute()

const {detailData} = history.state;	// state에 담겨있는 값 가져오기

const obj = ref(JSON.parse(detailData))	// 데이터 파싱 후 옮겨 담기

watchEffect(
	console.log("이름 :" + obj.value.name + "나이 : "+ obj.value.age)
)

</script>


<template>
    <section>
    	<v-card-text>여기는 상세 페이지</v-card-text>
    </section>
</template>