Vue.js教程
9.6 视图
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

Vue.js 服务器端渲染 SSR

Vue.js 服务端渲染 Nuxt.js

Nuxt.js简介

Nuxt.js安装

Nuxt.js目录结构

Nuxt.js配置

Nuxt.js路由

Nuxt.js视图

本节的内容阐述了如何在 Nuxt.js 应用中为指定的路由配置数据和视图,包括应用模板、页面、布局和HTML头部等内容。

模板

你可以定制化 Nuxt.js 默认的应用模板。

定制化默认的 html 模板,只需要在应用根目录下创建一个app.html的文件。

默认模板为:

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

举个例子,你可以修改模板添加 IE 的条件表达式:

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

布局

Nuxt.js 允许你扩展默认的布局,或在layout目录下创建自定义的布局。

默认布局

可通过添加layouts/default.vue文件来扩展应用的默认布局。

别忘了在布局文件中添加<nuxt/>组件用于显示页面的主体内容。

默认布局的源码如下:

<template>
  <nuxt/>
</template>

错误页面

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

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

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

举一个个性化错误页面的例子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根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用layout属性来引用。

请确保在布局文件里面增加<nuxt/>组件用于显示页面非布局内容。

举个例子layouts/blog.vue:

<template>
  <div>
    <div>这里是博客导航</div>
    <nuxt/>
  </div>
</template>

pages/posts.vue里, 可以指定页面组件使用 blog 布局。

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

更多关于页面布局配置项的信息,请参考页面布局配置API

看下示例视频立刻体验下。

页面

页面组件实际上是 Vue 组件,只不过 Nuxt.js 为这些组件添加了一些特殊的配置项(对应 Nuxt.js 提供的功能特性)以便你能快速开发通用应用。

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
export default {
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  },
  fetch () {
    // The fetch method is used to fill the store before rendering the page
  },
  head () {
    // Set Meta Tags for this Page
  },
  // and more functionality to discover
  ...
}
</script>

<style>
.red {
  color: red;
}
</style>

Nuxt.js 为页面提供的特殊配置项:

属性名 描述
asyncData 最重要的一个键, 支持异步数据处理,另外该方法的第一个参数为当前页面组件的上下文对象
fetch asyncData方法类似,用于在渲染页面之前获取数据填充应用的状态树(store)。不同的是fetch方法不会设置组件的数据。详情请参考关于fetch方法的文档
head 配置当前页面的 Meta 标签, 详情参考页面头部配置API
layout 指定当前页面使用的布局(layouts根目录下的布局文件)。详情请参考关于 布局 的文档
transition 指定页面切换的过渡动效, 详情请参考页面过渡动效
scrollToTop 布尔值,默认:false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于嵌套路由的应用场景。
validate 校验方法用于校验动态路由的参数。
middleware 指定页面的中间件,中间件会在页面渲染之前被调用, 请参考路由中间件

关于页面配置项的详细信息,请参考页面 API

HTML 头部

Nuxt.js 使用了vue-meta更新应用的头部标签(Head)andhtml 属性

Nuxt.js 使用以下参数配置vue-meta:

{
  keyName: 'head', // 设置 meta 信息的组件对象的字段,vue-meta 会根据这 key 值获取 meta 信息
  attribute: 'n-head', // vue-meta 在监听标签时所添加的属性名
  ssrAttribute: 'n-head-ssr', // 让 vue-meta 获知 meta 信息已完成服务端渲染的属性名
  tagIDKeyName: 'hid' // 让 vue-meta 用来决定是否覆盖还是追加 tag 的属性名
}

默认 Meta 标签

Nuxt.js 允许你在nuxt.config.js里定义应用所需的所有默认 meta 标签,在head字段里配置就可以了:

一个使用自定义viewport谷歌字体的配置示例:

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' }
  ]
}

想了解head变量的所有可选项的话,请查阅vue-meta使用文档

关于 Nuxt.js 应用 HTML 头部配置的更多信息,请参考HTML 头部配置 API

个性化特定页面的 Meta 标签

关于个性化特定页面的 Meta 标签,请参考页面头部配置API

注意:为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象,建议利用hid键为meta标签配一个唯一的标识编号。请阅读关于vue-meta的更多信息

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验