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

정제혁님의 프로필 이미지

작성한 질문수

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

TodoList 컴포넌트의 할 일 완료 기능 구현

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

해결된 질문

24.08.12 17:09 작성

·

64

1

2024-08-12 16 55 09.png

vue-cli로 프로젝트를 생성한 후, vue-router로 페이지까지 설정한 상태인데요. 라우터 설정을 통해 url에 따라 view파일 안의 vue파일들이 출력되고 있습니다.

또 view 파일의 vue파일들은 components 파일의 vue파일이 연결되어있는 상태인데, 제가 원하는 것은 App.vue의 data값을 components 파일의 AppTitle에 props로 내려주는 겁니다.

어떻게하면 구현할 수 있을까요 도움 부탁드립니다!

 

답변 2

0

장기효(캡틴판교)님의 프로필 이미지

2024. 08. 18. 16:01

안녕하세요 제가 확인이 좀 늦었네요 🙂 앱 컴포넌트에서 페이지 컴포넌트에 데이터를 내리는 방식보다는 각 페이지 컴포넌트에서 원하시는 데이터를 서버에서 받아와서 프롭스로 내리시는게 편할 거예요.

혹은 상태 관리 라이브러리 Vuex나 Pinia를 써보셔도 좋을 것 같습니다 :)

0

인프런 AI 인턴님의 프로필 이미지

2024. 08. 14. 17:11

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

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

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

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

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

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

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