Quasar 화면(Page, Layout) 구성하기

개요

 로그인 화면에서 로그인을 수행하면 메인 화면으로 이동하는데, 이 두개의 화면은 서로 다른 배치 구조를 가지고 있습니다..

 일반적으로 메인 화면은 Header, Footer, Menu, Content로 구성이 되고, 로그인 화면의 경우 필수 Content만 존재하고 나머지 구성 요소들이 없습니다.

 따라서 이런 것을 어떻게  구성하는지 알아봅시다.

 

Layout과 Page, Router 개념

 일반적인 웹페이지의 화면은 Header, Footer, Menu, Content로 구성이 됩니다.

 이런식으로 구성을 관리하는게 Layout입니다. 

 그런데 간단한 로그인 화면의 경우는 필수적으로 필요한 Content만 존재하고 나머지 구성 요소들이 없습니다.

 이렇게 메인화면과 로그인 화면의 구성이 다를때 이를 구분해주는 게 Layout입니다.

 

 Page는 Content를 만드는 단위입니다.

 일반적인 Layout에서 Header, Footer, Menu는 고정되고 Content는 Menu를 클릭함에 따라서 바뀌는데, 이때 Content를 Page로 생성합니다. 

 

 Layout과 Page를 묶어주는 역할을 Router에서 합니다. 

 

Layout과 Page 추가하는 명령어

 $ quasar new <p|page> [-f <option>] <page_file_name>
 $ quasar new <l|layout> [-f <option>] <layout_file_name>

# Create src/pages/MyNewPage.vue:
$ quasar new p MyNewPage

# Create src/pages/MyNewPage.vue and src/pages/OtherPage.vue:
$ quasar new p MyNewPage OtherPage

# Create src/layouts/shop/Checkout.vue
$ quasar new layout shop/Checkout.vue

# Create src/layouts/shop/Checkout.vue with TypeScript options API
$ quasar new layout -f ts-options shop/Checkout.vue

 

Router를 이용하여 Layout과 Page를 조합하기

 Layout과 Page를 생성만 한다고 해서 화면에 출력되는건 아니고 Router를 이용해서 직접 조합을 해줘야 합니다.  

 Router는 명령어가 존재하지 않고 src/router/routers.js 파일의 routes 변수를 직접 수정해야 합니다.

 아래의 예시는 로그인과 메인페이지를 처리하는 예시를 보여주는 코드입니다. 

 routes는 여러개의 route로 구성되고, 하나의 route는 path, component, children 으로 구성됩니다. 

 특정 route에 Layout을 적용하려면, component 항목에 레이아웃을 적용하면 됩니다.

 특정 children 에 Page가 정보를 넣게 되는데, 이곳에 등록하게 되면 <router-view /> 태그가 있는 곳에 해당 페이지가 출력되게 됩니다.

 최종적으로 특정 page.vue 파일을 보려면 URL에 route의 path+children.path를 입력하면 됩니다.

 예를 들어 아래 UserPage.vue 파일은 localhost/main/user 로 접속하면 볼 수 있게 됩니다.

const routes = [
  {// 로그인 경로
    path: '/',
    component: () => import('layouts/LoginLayout.vue'),
    children: [
      { path: '', component: () => import('pages/LoginPage.vue') }
    ]
  },
  {// 메인페이지 경로
    path: '/main',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/MainPage.vue') },
      { path: 'user', component: () => import('pages/UserPage.vue') }
    ]
  },
  {// 존재하지 않는 페이지 접근시 처리해주는 경로
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue')
  }
]