router-view에 props를 어떻게 넘길 수 있나요?

안녕하세요, 인프런 AI 인턴입니다.

Vue.js에서는 vue-router를 사용하여 특정 URL에 따라 다른 컴포넌트를 렌더링할 수 있습니다. 이 때, router-view 컴포넌트를 사용하여 라우팅된 컴포넌트를 표시합니다. 만약 App.vue의 data 값을 router-view를 통해 특정 페이지의 컴포넌트로 props로 전달하고자 한다면, vue-router의 라우트 구성에서 props 기능을 활용할 수 있습니다.

라우트 설정에서 props를 true로 설정하면 라우트의 파라미터를 props로 컴포넌트에 전달할 수 있습니다. 그러나 URL 파라미터가 아닌 App.vue의 data 값을 전달하려면, 라우트 설정에서 함수 형태로 props를 정의하여 외부 데이터를 직접 전달할 수 있습니다.

예를 들어, routes 배열에서 특정 경로를 정의할 때 다음과 같이 할 수 있습니다:

const router = new VueRouter({
  routes: [
    {
      path: '/some-path',
      component: SomeComponent,
      props: (route) => ({ yourDataValue: '값' })
    }
  ]
})

위 예시에서 yourDataValue란 이름으로 props를 전달하고 있으며, 이 값을 컴포넌트에서 props로 받아 사용할 수 있습니다. 이 방법을 통해 App.vue의 data 값 또는 다른 값을 직접 정의하여 컴포넌트에 전달할 수 있습니다.

App.vue의 데이터를 전달하려면, 위 코드에서 '값' 부분을 해당 데이터로 대체하여 사용하시면 됩니다. 예를 들어 App.vue의 data 내에 userData 값을 전달하고자 한다면, 상위 컴포넌트에서 router 인스턴스를 접근하여 userData 값을 가져와 위와 같이 설정할 수 있습니다.

인프런 커뮤니티 질문&답변