inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

History 모드 : SPA, SSR, CSR

페이지 컴포넌트에 props를 함수 모드로 전달할 때!

788

eg2data

작성한 질문수 18

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 

안녕하세요.

router 설정 시 페이지 컴포넌트에 props를 전달할 수 있다는 부분을 학습했고, boolean 뿐만 아니라 함수 모드도 가능하다고 알려주셨습니다.

{
 path: '/posts/:id',
 name: 'PostDetail',
 component: PostDetailView,
 // props: true,
 props: route => ({ id: parseInt(route.params.id) }),
},

함수를 정의하는 부분에서, route를 인자로 두고 route.params.id를 값으로 하는 id를 return하는 것을 작성했습니다.

이 때, route를 미리 정의하지 않아도 이런 식으로 쓸 수 있는건가요?

router/index.js에도 route는 정의되어 있지 않습니다.

이를 테면, const route = useRoute()로 선언이 되어 있어야 route.params.id와 같은 접근이 가능한거 아닌가.. 생각했습니다.

혹은 이 props를 사용하는 PostDevailView.vue에는 route가 미리 정의되어 있어야 한다고 생각했는데, 그것도 아니네요.

 

어느 부분을 더 학습하면 올바른 이해를 할 수 있을까요?

vue.js

답변 1

0

짐코딩

안녕하세요 :)

route 객체는 props에 콜백함수를 입력 했을 때 매개변수로 받는 파라미터입니다.

props: (route) => ({ id: parseInt(route.params.id) }) // route 인자로 받음

질문드립니다.

0

32

0

unplugin-vue-components 질문드립니다.

0

41

2

강의듣다가 헷갈려서 질문드립니다.

0

35

1

와 짐코딩님 강의 들으면서 느끼는게 많네요.

0

33

1

질문드립니다.

0

33

2

라우터 인스톨 후 실행안됨

1

52

2

코드 자동 포매팅 질문

0

73

2

필터 watchEffect 질문입니다.

0

52

1

json-server 오류가 다른게 뜨네요

0

115

1

미리보기가 안됩니당...

0

70

2

unplugin-vue-components

0

86

2

TypeError 질문

0

53

1

v-model="show" :show="show" 같이 사용?

1

58

1

hash 모드 배포의 필요성?

0

64

2

.eslintrc.cjs 가 없습니다

0

96

2

title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.

0

98

3

_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.

0

65

1

@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.

0

73

2

중첩된 컴포넌트 문제

0

76

2

교안에 있는 부분이 아닌가요?

0

109

2

useAxios Proxy(Object) RefImpl

0

114

1

axios timeout

0

338

3

강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.

0

124

2

컴포넌트 분리 부분에서 오류가 나요ㅠㅠ

0

170

2