• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

router-view에 대해...

22.04.10 14:28 작성 조회수 704

1

부모 컴포넌트
<templete>
   <router-view/>
</templete> 

 

하위 컴포넌트 
<templete>
  <sub-content :props="props"/>
  <router-view :props="props"/>
</templete>

하위 컴포넌트에서 <sub-content/> 컴포넌트를 제외한 부분은
라우팅에 따라 다르게 보여져야 할 것 같아서, 부모에도 <router-view/> 태그를 사용했고 
하위 컴포넌트에도 <router-view/> 태그를 사용했는데요, 
이렇게 구조를 짜니까 sub-content에는 props가 넘어가는데 
하위 컴포넌트의 <router-view/>로 보내는props가 증발해버리더군요. 
 
이럴 경우에는 아무리 <sub-content/>가 하위 페이지마다 반복해서 들어간다 할지라도 
하위에서 <router-view>를 쓰지 않고,
하위 컴포넌트에 일일이 <sub-content/>가 들어있는 컴포넌트를 따로 만들어야 되는건지... 궁금합니다. 

아무래도 부모에 정의된 router-view 와
하위에 정의된 router-view를 구분하지 못하고 props가 무시되는 거 아닐까 싶은데... 맞나요?

답변 1

답변을 작성해보세요.

1

안녕하세요 재밌는 질문이네요, 라우터 뷰도 하나의 컴포넌트이기 때문에 props로 내려서 사용하실 수 있습니다. 다만, 라우터 뷰에서 받은 프롭스를 또 접근해서 다시 다른 라우터 뷰로 내려주는 건 일반적인 방식이 아니라 아마 인스턴스의 값을 직접 접근해서 해야 할 것 같아요. 라우터 뷰가 컴포넌트로 되어 있다고 해서 이걸 일반적인 props를 내려주는 컴포넌트로 활용하는 것은 목적에 맞지 않은 것 같아요 :)

hhhitihh님의 프로필

hhhitihh

질문자

2022.04.13

아 역시 질문하길 잘했네요. 덕분에 명쾌해졌습니다. 정말 감사드립니다. 

다른 대안으로는 

<sub-content :props="props"/>
<comp1 v-if="라우터 1"  :props="props"/> <!--프롭스를 보내고 싶은 컴포넌트-->
<comp2 v-else-if="라우터 2"/>

위와 같이 v-if-else로 처리하는 방법과 

뷰 1 
<sub-content/>
<comp1/>

뷰 2 
<sub-content/>
<comp2/>

이렇게 하위 컴포넌트에서 중복되는 컴포넌트를 개별적으로 일일이 작성하는 방법 
둘 중 한가지를  생각해보고 있네요.. 

실은 vuex 모듈을 만들어서 state 혹은 getters를 불러오고 싶었는데 
router-view 중복 때문인지 vuex가 초기화되서 props를 생각하다 이렇게 꼬여버린 것 같습니다.. 
router-view가 아닌 개별 컴포넌트로 작성하면 그냥 해결 되지 않을까 싶은데
어떻게 생각하실지 궁금합니다. 

수업때는 그냥 따라했는데 막상 뭐 하나 진심으로(?) 만들어보려니까 컴포넌트 정리가 쉽지가 않은 것 같네요..;