布局页面

QLayout必须包含页面内容。 如果你还没有，请先阅读QLayout文档页面。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QPageContainer',
    'QPage'
  ]
}

基本用法

QPage必须由QPageContainer封装，而QPageContainer又必须是QLayout的子节点。

<q-layout>
  ...
  <q-page-container>
    <q-page>
      <!-- 页面内容 -->
    </q-page>
  </q-page-container>
</q-layout>

通常情况下，QPageContainer是Layout模板的一部分（它只包含一个<router-view/>子元素），它的内容进入/src/pages下的单独vue文件。 如果还没有，请阅读集成布局与路由器。

<!-- 布局vue文件: -->
<q-layout>
  ...
  <q-page-container>
    <router-view />
  </q-page-container>
</q-layout>

<!-- 页面vue文件: -->
<q-page padding>
  <!-- 页面内容 -->
</q-page>

QPage Vue属性

Vue属性 类型 说明
padding 布尔 向页面添加默认的动态填充。
布局侧滑菜单 页面粘滞