vue 3 js - quasar 게시판 방명록 만들기 1 - 페이지 추가

 

https://godffs.tistory.com/3753

quasar vue3 설치

 

 

- 레이아웃 추가

- 페이지 추가

- router 설정

 

 

quasar 로 설치를 진행했으면 페이지를 추가한다

 

레이아웃을 추가했다

src \ layouts \ comunity \ LayoutGuestBook.vue 파일 추가

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header> </q-header>

    <q-page-container>
      <!-- 
        현재 라우트에 맞는 컴포넌트가 렌더링 
        현재 라우터가 제공하는 컴포넌트가 화면에 그려진다
        라우팅 설정에 따른 페이지 이동이 가능해짐
      -->
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "GuestBook",
  setup() {},
});
</script>

 

페이지를 추가했다

src \ pages \ comunity \ GuestBook.vue 파일 추가

<template>방명록 입니다</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  setup() {},
});
</script>

 

추가한 파일들을 라우터에 등록한다

src \ router \ routes.js

const routes = [
  {
    path: "/",
    component: () => import("layouts/MainLayout.vue"),
    children: [{ path: "", component: () => import("pages/IndexPage.vue") }],
  },
  {
    //방명록 주소
    path: "/guestbook",
    component: () => import("src/layouts/comunity/LayoutGuestBook.vue"),
    children: [
      {
        //방명록 기본 페이지
        path: "",
        component: () => import("pages/comunity/GuestBook.vue"),
        redirect: "/guestbook/index", // /guestbook 들어왔을때 /guestbook/index 주소로 변경
      },
      {
        //방명록 기본 페이지
        path: "index",
        component: () => import("pages/comunity/GuestBook.vue"),
      },
    ],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: "/:catchAll(.*)*",
    component: () => import("pages/ErrorNotFound.vue"),
  },
];

export default routes;

 

결과 확인

quasar-project-js.zip

0.20MB