[Vue] Layout 설정 방법

1. layout 파일 생성

• 먼저, 레이아웃 컴포넌트들을 생성해야 합니다. src/components/layout 폴더에 DefaultLayout.vue, HeaderLayout.vue, FooterLayout.vue 파일을 생성합니다
  

• DefaultLaout.vue

<template>
  <div id="wrap" >
    <HeaderLayout />
    <div class="layout-content">
      <main>
        <router-view />
      </main>
    </div>
    <FooterLayout />
  </div>
</template>

<script>
import HeaderLayout from '@/components/layout/HeaderLayout.vue'
import FooterLayout from '@/components/layout/FooterLayout.vue'

export default {
    name: 'DefaultLayout',
    components: {
        HeaderLayout,
        FooterLayout
    }
}
</script>

DefaultLayout은 헤더, 메인 콘텐츠 영역, 푸터 레이아웃을 포함하는 기본 레이아웃을 구성합니다.

• HeaderLayout.vue

<template>
    <div id="header">
        header 내용
    </div>
</template>

<script>
export default {
    name: 'HeaderLayout'
}
</script>

HeaderLayout은 헤더 영역을 구성하는 컴포넌트입니다.

• FooterLayout.vue

<template>
    <div id="footer">
        footer 내용
    </div>
</template>

<script>
export default {
    name: 'FooterLayout'
}
</script>

FooterLayout은 푸터 영역을 구성하는 컴포넌트입니다.

2. 라우터 설정

router 설정을 통해 DefaultLayout을 기본 레이아웃으로 적용하고, 필요한 컴포넌트를 children으로 정의합니다.

import { createRouter, createWebHistory } from 'vue-router';
import DefaultLayout from '@/components/layout/DefaultLayout.vue';
import TestPage from '@/components/page/TestPage.vue';

const routes = [
    {
        path: '/', component: DefaultLayout,
        children: [
            { path: '', component: TestPage }
        ]
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

위 코드에서 path: '/'는 DefaultLayout을 기본 레이아웃으로 사용하고, TestPage 컴포넌트를 자식 컴포넌트로 렌더링합니다.

3. App.vue 설정

App.vue는 애플리케이션의 최상위 컴포넌트입니다. 여기서는 router-view를 통해 라우팅된 컴포넌트를 렌더링합니다.

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

✅결론

이 설정을 통해 Vue 애플리케이션에서 기본적인 레이아웃을 정의하고, 라우터를 사용하여 여러 페이지에서 일관된 레이아웃을 적용할 수 있습니다. 각 컴포넌트는 필요한 위치에서 router-view를 사용하여 동적으로 렌더링됩니다.