[Vue.js] 레이아웃 컴포넌트

레이아웃 컴포넌트

---

일반적인 웹사이트를 보면 고정적인 영역을 가지는 레이아웃을 가지고 있습니다. 이를 재사용 컴포넌트로써 만들어 보겠습니다.

project
|--src
    |--component
    |   |--layouts
    |		|--HeaderLayout.vue
    |		|--FooterLayout.vue
    |--App.vue
    |--main.js

 

작동 순서

App.vue는 main.js에 import 되어 있으므로 App.vue에 레이아웃 컴포넌트를 배치를 하면 됩니다. App.vue에서 레이아웃 컴포넌트를 import를 한 이후에 해당 태그를 template안에 배치하여 레이아웃을 만들수 있습니다.

 

 

App.vue

<template>
  <header-layout />
  <div class="container">
    <router-view />
  </div>
  <footer-layout />
</template>
<script>
import HeaderLayout from '@/components/layouts/HeaderLayout.vue'
import FooterLayout from '@/components/layouts/FooterLayout.vue'
export default {
  components: { HeaderLayout, FooterLayout }
}
</script>

 

HeaderLayout.vue

router-link to="경로" 테그를 통해서 router에 정의한 path로 화면을 이동시킵니다.

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/databinding/string">String</router-link> |
    <router-link to="/databinding/html">Html</router-link>
  </nav>
</template>

 

FooterLayout.vue

부트스트랩 예제를 이용하여 만든 footer영역을 만들었습니다.

<template>
  <div class="container">
    <footer
      class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"
    >
      <div class="col-md-4 d-flex align-items-center">
        <span class="mb-3 mb-md-0 text-muted">&copy; 2022 Company, Inc</span>
      </div>
    </footer>
  </div>
</template>