IT이야기

Quasar 레이아웃 내에서 슬롯을 작동시키는 방법

cyworld 2022. 3. 11. 22:32
반응형

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

반응형