뷰에서 가변적으로 헤더나 푸터를 바꾸는 방법 문의

Question

안녕하세요.

뷰에서 라우터 사용하고 있으며, 헤더나 푸터를 아래 처럼 모든 컴포넌트에서 고정적으로 나오게 설정하였습니다.

다만, 예로 회원가입 컴포넌트(특정 컴포넌트)로 이동했을때에 고정적인 헤더나 푸터가 아닌 다른 내용의 헤더나 푸터를 출력하는 방법이 궁금합니다.

Main.vue <template> <main> // 헤더 출력 <Header /> <article> <router-view></router-view> </article> // 푸터 출력 <Footer /> </main> </template> <script> import Header from "./Header.vue"; import Footer from "./Footer.vue"; export default { name: "Main", components: { Header, Footer } }; </script>

기존 "Hedaer.vue"에다가 조건을 걸어야 하나요?

아니면, "Vuex"로 값을 가져와서 동적으로 뿌려주는 식으로 해야할지 궁금합니다.

Answer 1

Main.vue 대신 SignUp.vue를 하나 더 만드시고

라우터에 /signup, SignUp.vue로 따로 연결하시는 게 좋을 것 같습니다. Main.vue에서 v-if로 회원가입페이지인지 아닌지를 판단해서 다르게 그려줄 수도 있는데 코드가 지저분해지고 예외 페이지가 늘어날수록 v-if문이 복잡해질 것 같네요.

Answer 2

다음과 같은 형태로 사용하시면 됩니다.

1. 헤더의 출력은 v-if로 제어하시면 됩니다.

2. 여러개의 헤더일경우 v-else-if등의 다른 조건으로 하시면 됩니다.

3. 동적 컴포넌트 로드(Svelte에서 지원합니다)를 Vue에서는 지원하지 않아 템플릿 문법이 약간 지저분해도 모든 컴포넌트를 import 하신다음에 v-if로 선언하는 방식으로 하셔야합니다

<template> <main> // 헤더 출력 <Header v-if="condition1" /> <AnotherHeader v-else /> <article> <router-view></router-view> </article> // 푸터 출력 <Footer /> </main> </template>

Vuex를 사용하실 필요는 없고 조건이 간단한경우 root component의 data를 불러와서 사용하셔도 됩니다. $root 스코프를 통해 사용가능합니다.