728x90
컴포넌트에서 컴포넌트로 데이터를 전달해줄 때 Prop을 사용할 수 있지만, URL을 통해 정보를 넘기는 방법도 있다. 변수에 값을 담아 URL로 보내는 것이 바로 query string 이다.
다음 코드는 query string을 Vue 프로젝트에서 사용하는 방법이다.
import router from "../router/index.js";
export default {
setup() {
const score = ref(0);
const timer = ref(0);
// score, timer 올라가는 코드
router.push({
path: "/result",
query: {
score: score.value,
timer: timer.value,
},
});
},
};
router.push는 지정한 path로 이동하는 함수이며, 이때 query에 값을 전달할 수 있다. 만약 score: 10, timer: 15를 전달한다면 아래와 같은 형식으로 URL이 찍힐 것이다.
더보기
https://fourlettersquizz.web.app/result?score=10&timer=14.22
![](https://blog.kakaocdn.net/dn/73ZaL/btsBoiKMQqg/X50M8b8OHEYrItPIJ202ok/img.png)
위의 사진과 같이 result page에서는 이 URL을 사용해서 score와 timer를 추출해서 활용할 수 있게 된다. 해당 코드는 다음과 같다.
import { useRoute } from "vue-router";
export default {
setup() {
const route = useRoute();
const score = route.query.score;
const timer = route.query.timer;
},
};
useRoute를 통해 URL의 query에 접근할 수 있고 거기에서 score, timer를 뽑아서 활용할 수 있게 되었다. 즉 다른 page에서 URL에 query로 넘겨준 data를 result page에서 받아서 사용할 수 있게 된 것이다!
근데 여기서 생기는 하나의 의문점은 URL을 통해 data를 이렇게나 투명하게 주고 받는다면 user가 악용할 가능성이 있지 않을까? URL의 query를 조작함으로 접근해서는 안되는 data에 접근할 수 있게 되는 것은 아닐까? 이에 대한 해결방법은 다음 포스팅에서 알아보자!
728x90
'Web Frontend > Vue' 카테고리의 다른 글
[Vue] 프로젝트 시작하기 (1) | 2023.12.07 |
---|---|
[Javascript] Query String 암호화하기 - crypto-js (1) | 2023.12.06 |
[Javascript] 네 글자 퀴즈 - Vue3 Project (2) | 2023.12.04 |