nuxt.js中layout属性介绍

责编:menVScode 2018-09-26 16:10 阅读(70)

layouts:宿主布局页面模板组件,用于你可以把不同的页面指定使用不同的布局,不可更改。

layout属性

    官网介绍:https://zh.nuxtjs.org/api/pages-layout

    作用:layouts 目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用。

创建属于自己的模板

layouts
--|default.vue
--|error.vue
--|user.vue
pages
--| user
-----| index.vue
-----| one.vue
--| index.vue

创建 user.vue 模板,然后再pages/user/index.vue使用

<template>
  <section class="container">
    <div>
      列表页面
    </div>
  </section>
</template>

<script>
    export default {
      layout: 'user',
    }
</script>

同时也可以使用函数方式指定模板

layout (context) {
    return 'user'
}

在上面的例子中, Nuxt.js 会使用 layouts/user.vue 作为当前页面组件的布局文件。


layouts/error.vue 错误页面

你可以通过编辑 layouts/error.vue 文件来定制化错误页面.

这个布局文件不需要包含 <nuxt/> 标签。你可以把这个布局文件当成是显示应用错误(404,500等)的组件。

默认的错误页面源码在 这里

标签: layouts nuxt vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码