[Vue.js 3] 다른 컴포넌트에 Query 전달

서로 부모자식이 아닐 때 데이터를 주고 받으려면 eventBus, store를 활용하거나 route를 통해서 params나 query를 통해 데이터를 전달할 수 있다.

 

 

views/com1.vue (query 보냄)

views/com2.vue (query 받음)

 

views/com1

vue setup() 내용 추가

... 생략 ...

const nextPage = (data) => {
	router.push({
    	name: "com1",
        puery: {
        	num: data
        }
    })
}

... 생략 ...

 

views/com2

import { useRoute } from "vue-router";
... 생략 ...
export default {

  name: "com2",
  setup() {
    const route = useRoute();
    console.log(route.query.num);
    return { };
  },
}

 

이렇게 작성하고 query로 1을 전달해보았다.

콘솔창에 찍힌 숫자

 

참고 링크