[Vue3] Typescript / router.push 방법

 

리스트에서 row 선택 시 상세화면으로 넘어가는 기능입니다.

이때 router.push 를 사용합니다.

 

■ 데이터 넘기기

projectList.vue > template

1. 리스트에서 row-click 시 특정 함수를 호출합니다.

 

 

projectList.vue > script

 

● router 선언

 

 

● 프로젝트 상세정보(projectForm.vue)으로 이동하기 위한 함수 선언

1. router.push 할 때, 이동할 router의 name으로 설정(router.ts에 설정한 name 값)하고,

2. 넘길 데이터는 별도의 query(or params)로 명명하고 json 형식으로 넘겨야 합니다.
Ex.  router.push(name:'project-form', param:{key:value, key:value})

3. 리스트의 row 정보를 가져올 때 interface를 선언하여 type을 지정해 주고 아래와 같이 지정해 주면 됩니다.
Ex. row: 인터페이스명

※ 함수의 1번 인자는 event 고정, 두번째 인자가 row 값입니다. event를 사용하지 않을 경우 event -> _event로 하면 됩니다.

 

 

routes.ts

1. params 으로 넘기는 파라미터를 지정해 줘야합니다. router.push할 때 사용한 파라미터명과 일치해줘야 합니다.
2. router를 통해 vue 간 데이터를 주고받기 위해서는 props : true 설정을 해줘야 합니다.

 

 

 

■ 데이터 받기

projectForm.vue > script

 

※ <script setup lang="ts"> 를 사용하면 defineProps를 import 하지 않아도 됩니다.

1. router 를 통해 props를 받아오기 위해 선언함.
- ProjectList.vue에서 router로 push한 key 값과 일치해야 합니다.

2. 상위 컴포넌트에서 보낸 props를 사용하기 위해서는 defineProps를 사용해야 합니다.

 

사용 시 props.변수명