[vue.js] 페이지를 이동하면서 데이터를 넘기는 방법

1. 쿼리 파라미터

const goToDetailPage = (schedule) => {
    router.push({
        name: 'scheduleDetail', // 이동할 라우트의 이름
        query: {                  // URL 쿼리 파라미터
            projectId: schedule.id,
            analysisItem: schedule.section
        }
    });
};

이동 url: /scheduleDetail/1/공부

 

 

2. 라우트 파라미터

// 라우터 설정
{
  path: '/Schedule/:scheduleId/:section',
  name: 'scheduleDetail'
}

// goToDetailPage 함수
const goToDetailPage = (schedule) => {
    router.push({
        name: 'scheduleDetail',
        params: {
            projectId: schedule.id,
            analysisItem: schedule.section
        }
    });
};

//결과 url: /scheduleDetail/1/공부

특징

- url이 깔끔하고 RESTful하다

- 북마크가 가능하다

- url에서 데이터가 노출된다

 

3. state 옵션

const goToDetailPage = (schedule) => {
    router.push({
        name: 'scheduleDetail',
        state: {
            schedule: schedule
        }
    });
};

- url에 데이터 노출되지 않음

- 페이지 새로고침시 데이터 손실됨 → 임시 데이터에 사용

- 복잡한 객체도 전달 가능

 

4. 상태 관리 라이브러리(Pinia, Vuex)

import { useScheduleStore } from '@/stores/schedule'

const scheduleStore = useScheduleStore()
const goToDetailPage = (schedule) => {
    scheduleStore.setCurrentSchedule(schedule)
    router.push({ name: 'scheduleDetail' })
};

- 전역적으로 상태 관리 가능

- 새로고침 시에도 데이터 유지 가능(로컬 스토리지와 함께 사용)

- 컴포넌트 간 데이터 공유 쉬움

 

+상태 관리 라이브러리: MVC 모델로 비유하면 Model+Controller의 일부 기능

 

5. provide/inject

// 부모 컴포넌트
import { provide } from 'vue'
provide('currentSchedule', schedule)

// 자식 컴포넌트
import { inject } from 'vue'
const currentSchedule = inject('currentSchedule')

- 컴포넌트 트리를 통해 데이터 전달

- 부모 자식 관계가 명확할 때 유용

- 전역 상태 관리보다 범위가 제한적

 

• 간단한 데이터: 라우트 파라미터/쿼리 파라미터
• 복잡한 데이터/민감한 정보: 상태 관리 라이브러리
• 임시 데이터: state 옵션
• 컴포넌트간 공유: provide/inject