布局页面

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 布尔 向页面添加默认的动态填充。