Vue3 페이지 레이아웃 구성하는 2가지 방법

페이지 레이아웃 구성 방법 2가지에 대해서 작성해보았습니다!

 

1. 페이지에 레이아웃 컴포넌트 씌우기

2. Vue Router의 meta 속성을 이용하여 레이아웃 시스템 생성

---

 

 

1. 페이지에 레이아웃 컴포넌트 씌우기

- 레이아웃 컴포넌트(BasictLayout.vue 또는 다른 레이아웃)를 생성하고 사용할 페이지(Home.vue)에 적용하는 방법

장점

• 레이아웃 시스템을 만들기 가장 쉽다!

단점

• 유연성이 떨어진다
• 각 페이지에서 레이아웃을 불러오는 형태로 작성해야 한다.
• 다음 경로가 동일한 레이아웃을 사용하더라도 경로가 변경될 때마다 레이아웃이 마운트 해제되고 삭제된다.

 

 

---

src/components/layout/BasicLayout.vue

레이아웃 생성

<template>
  <BasicLayout> <div>홈페이지 입니다</div></BasicLayout>
</template>

<script lang="ts" setup>
import BasicLayout from "@/components/layout/BasicLayout.vue";
</script>

 

 

 

 

---

 

src/views/Home.vue

레이아웃 적용

<template>
  <BasicLayout> 
      <div>홈페이지 입니다</div>
  </BasicLayout>
</template>

<script lang="ts" setup>
import BasicLayout from "@/components/layout/BasicLayout.vue";
</script>

 

src/views/MyPage.vue

레이아웃 미적용

<template>
  <div>마이페이지입니다</div>
</template>

 

 

 

 

---

src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: () => import(/* webpackChunkName: "home" */ "@/views/Home.vue"),
  },
  {
    path: "/mypage",
    name: "MyPage",
    component: () =>
      import(/* webpackChunkName: "mypage" */ "@/views/MyPage.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

 

 

 

 

---

src/layouts/default/AppBar.vue

src/layouts/default/View.vue

src/layouts/default/Default.vue

 

Default.vue에서 AppBar.vue와 View.vue를 불러오는 구조

// Default.vue
<template>
  <v-app>
    <default-bar />

    <default-view />
  </v-app>
</template>

<script lang="ts" setup>
  import DefaultBar from './AppBar.vue'
  import DefaultView from './View.vue'
</script>


//AppBar.vue
<template>
  <v-app-bar flat>
    <v-app-bar-title>
      <v-icon icon="mdi-circle-slice-6" />

      Essentials Preset
    </v-app-bar-title>
  </v-app-bar>
</template>


// View.vue
<template>
  <v-main>
    <router-view />
  </v-main>
</template>

 

 

 

 

---

src/App.vue

<template>
  <Default />
</template>

<script lang="ts" setup>
import Default from "./layouts/default/Default.vue";
</script>

 

---

결과

 

home.vue에만 레이아웃이 적용됨

---

 

2. Vue Router의 meta 속성을 이용하여 레이아웃 시스템 생성

- 라우터에서 레이아웃을 한 번 가져오고 각 경로에 관련 레이아웃을 젹용하는 방법

 

특징

• 빌트인 특수 엘리먼트 <component>가 사용됨

[vue built-in 특수 엘리먼트 공식 문서]

https://ko.vuejs.org/api/built-in-special-elements.html

 

장점

• 1번 방식처럼 각 페이지에서 레이아웃을 가져오는 것보다 편리함

 

단점

• 경로를 변경하지 않고 레이아웃을 동적으로 변경해야 하는 경우 이 방법은 작동하지 않음!
• 일정 시간 지난 후 잠긴 페이지가 표시되어야 하는 경우, 오프라인 페이지를 표시하는 경우, 에러로 오류 페이지를 표시하는 경우

 

[Route Meta Fields 공식문서]

https://router.vuejs.org/guide/advanced/meta.html#route-meta-fields

 

 

위에서 변경된 파일은 아래 3가지 뿐이고 나머지는 동일하다!

src/router/index.ts

src/layouts/default/View.vue

src/views/Home.vue

---

src/router/index.ts

 

Home에만 meta 필드를 추가했다.

// Composables
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import BasicLayout from "../components/layout/BasicLayout.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: () => import(/* webpackChunkName: "home" */ "@/views/Home.vue"),
    meta: {  // meta field 추가
      layout: BasicLayout,
    },
  },
  {
    path: "/mypage",
    name: "MyPage",
    component: () =>
      import(/* webpackChunkName: "mypage" */ "@/views/MyPage.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

 

 

 

---

src/layouts/default/View.vue

 

특수 엘리먼트 <component>의 'is' props를 사용한다.

$route를 사용해 meta 속성에 액세스하여 layout 속성에 접근한다.

layout 속성이 있다면 앞서 router에서 정의한 BasicLayout 컴포넌트를 불러오거나

layout 속성이 없다면 문자열로 대체하는 div태그를 사용한다!

<template>
  <v-main>
    <component :is="$route.meta.layout || 'div'">
      <router-view />
    </component>
  </v-main>
</template>

 

 

 

 

---

src/views/Home.vue

 

1번에서 작성했던 레이아웃 가드를 지운다!

<template>
  <div>홈페이지 입니다</div>
</template>

 

 

 

 

---

결과

 

home.vue에만 레이아웃이 적용됨

 

 

 

 

 

 

 

# 참고한 글 : https://itnext.io/3-ways-to-create-a-multiple-layouts-system-vue-3-b24c0736b7bb