반응형
Quasar 레이아웃 내에서 슬롯을 작동시키는 방법
그래서 나는 기본적인 레이아웃을 가지고 있다.
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated class="bg-secondary text-white">
<q-toolbar >
<slot name="toolbar"></slot>
</q-toolbar>
</q-header>
<q-page-container >
<router-view ></router-view>
</q-page-container>
</q-layout>
</template>
기본 라우터:
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue') }
]
}
]
및 Index.vue:
<template>
<q-page>
<template v-slot:default> CONTENT SHOWS</template>
<template v-slot:toolbar> CONTENT DOESN'T SHOW</template>
</q-page>
</template>
내가 뭘 잘못하지?라우터 슬롯을 어떻게 구하지?
참조URL: https://stackoverflow.com/questions/59188571/how-to-get-slot-to-work-inside-a-quasar-layout
반응형
'IT이야기' 카테고리의 다른 글
여러 탭의 활성 탐색바를 시각화 및 vue-requency 활성 탐색기 (0) | 2022.03.11 |
---|---|
Vue 라우터가 구성 요소로 라우팅되지 않는 이유 (0) | 2022.03.11 |
Python에서 사전 키를 목록으로 반환하는 방법? (0) | 2022.03.11 |
Vuetify 버튼의 텍스트 색상을 변경하는 방법 (0) | 2022.03.11 |
도커가 설정한 반응 환경 변수 읽기 (0) | 2022.03.11 |