vue-router를 이용해서 defaultLayout, 페이지 레이아웃 구성하기

 

전제조건 : vue3, vue-router 프로젝트 생성

 

1. 컴포넌트 생성

// src/views/Home.vue

<template>
    <v-container class="text-center">
        <h1>Home</h1>
        <v-btn class="pa-3" to="/about">Go To About</v-btn>
        <br />
        <v-btn color="primary" class="ma-3" to="/profile">Go To Profile</v-btn>
    </v-container>
</template>

<script lang="ts" setup></script>

// src/views/About.vue

<template>
    <v-container class="text-center">
        <h1>About</h1>
        <v-btn class="pa-3" to="/">Go To Home</v-btn>
        <br />
        <v-btn color="primary" class="ma-3" to="/profile">Go To Profile</v-btn>
    </v-container>
</template>

<script lang="ts" setup></script>

// path: src/views/Profile.vue

<template>
    <v-container class="text-center">
        <h1>Hello, this my profile page</h1>

        <v-btn to="/">Go To Home</v-btn>
    </v-container>
</template>

<script lang="ts" setup>
</script>

 

 

2. router.js 생성

// path: src/router/routes.ts

import { RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/profile',
    name: 'Profile',
    component: () =>
      import(/* webpackChunkName: "profile" */ '../views/Profile.vue'),
  },
];

export default routes;

// path: src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';

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

export default router;

3. main.js에 추가

// path: src/main.js

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

// line 1: import the router
import router from './router';

const app = createApp(App);

// line 2: use the router
app.use(router);
app.mount('#app');

 

4. app.vue 추가

// path: src/App.vue

<script>
</script>

<template>
<!-- Add this line -->
  <router-view />
</template>

5. 레이아웃 정의 defaultLayout생성

// Path: src\layouts\TheDefaultLayout.vue

<script>
</script>

<template>
    <v-layout>
        <v-main>
          <!--The <slot> element is a slot outlet that indicates 
                where the "VIEW" content should be rendered.-->
            <slot></slot>
        </v-main>
    </v-layout>
</template>

// Path: src\layouts\TheDashboardLayout.vue

<script>
</script>

<template>
    <v-layout>
        <v-app-bar color="grey-lighten-2"></v-app-bar>
        <v-navigation-drawer color="grey-darken-2" permanent></v-navigation-drawer>
        <v-main>
          <!--The <slot> element is a slot outlet that indicates 
                where the "VIEW" content should be rendered.-->
            <slot></slot>
        </v-main>
    </v-layout>
</template>

`slot`은 한 구성 요소에서 다른 구성 요소로 전달되는 콘텐츠를 표시하기 위해 vuejs에서 제공하는 예약된 공간입니다. vuejs에는 명명된 슬롯과 명명되지 않은(기본) 슬롯의 두 가지 유형의 슬롯이 있습니다.

 

6. 경로 레이아웃 연결, router.js 업데이트

// path: src/router/routes.js


const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
    meta: {
      layout: 'Default',
    },
  },
  {
    path: '/about',
    name: 'About',
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta: {
      layout: 'Default',
    },
  },

  {
    path: '/profile',
    name: 'Profile',
    component: () =>
      import(/* webpackChunkName: "profile" */ '../views/Profile.vue'),
    meta: {
      layout: 'Dashboard',
    },
  },
];

export default routes;

 

 

출처에 추가 과정 있음!! 여기까지만 해도 생성 가능

 

---

출처

https://honeydanji.healthsarang.com/2023/03/code-vue3-layouts.html

https://blog.izem.dev/a-vue-3-users-guide-to-creating-complex-layouts

https://vueschool.io/articles/vuejs-tutorials/composing-layouts-with-vue-router/