视图

默认模板

在 layouts 目录下是布局文件, 默认有一个 default.vue, 可以通过改变此文件改变全局布局

<template>
  <div>
    <nuxt/>
  </div>
</template>

错误模板

错误模板位于 layouts/error.vue, 可自定义错误页面

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>
<script>
export default {
  props: ['error'],
  layout: 'blog' // 你可以为错误页面指定自定义的布局
}
</script>

自定义模板

在 layouts 文件夹下创建的任何文件都可作为模板, 比如创建一个 layouts/posts.vue, 只需在需要使用此布局的页面中声明:

<script>
export default {
  layout: 'posts'
}
</script>

自定义头部

可以在 nuxt.config.js 中配置全局的页面头部信息:

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  ]
}

也可在指定的页面中配置页面级别的头部信息:

<template>
  <h1>{{ title }}</h1>
</template>
<script>
export default {
  data () {
    return {
      title: 'Hello World!'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
}
</script>

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress