NUXT: 视图和模板
视图
本章节的内容阐述了如何在 Nuxt.js 应用中为指定的路由配置数据和视图,包括应用模板、页面、布局和HTML头部等内容。
模板
你可以定制化 Nuxt.js 默认的应用模板。
定制化默认的 html 模板,只需要在应用根目录下创建一个 app.html
的文件。
默认模板为:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}><head {{ HEAD_ATTRS }}>{{ 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_ATTRS }}>{{ HEAD }}</head><body {{ BODY_ATTRS }}>{{ APP }}</body>
</html>
布局
Nuxt.js 允许你扩展默认的布局,或在 layout
目录下创建自定义的布局。
默认布局
可通过添加 layouts/default.vue
文件来扩展应用的默认布局。
提示: 别忘了在布局文件中添加 <nuxt/>
组件用于显示页面的主体内容。
默认布局的源码如下:
<template><nuxt/>
</template>
自定义布局
layouts
目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout
属性访问的自定义布局。
假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue
:
<template><div><div>我的博客导航栏在这里</div><nuxt/></div>
</template>
然后我们必须告诉页面 (即pages/posts.vue
) 使用您的自定义布局:
<template>
<!-- Your template -->
</template>
<script>
export default {layout: 'blog'// page component definitions
}
</script>
更多有关 layout
属性信息: API 页面 布局
点击查看 演示视频 了解自定义布局的实际效果。
错误页面
你可以通过编辑
layouts/error.vue
文件来定制化错误页面.
警告: 虽然此文件放在 layouts
文件夹中, 但应该将它看作是一个 页面(page).
这个布局文件不需要包含 <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>
页面
页面组件实际上是 Vue 组件,只不过 Nuxt.js 为这些组件添加了一些特殊的配置项(对应 Nuxt.js 提供的功能特性)以便你能快速开发通用应用。
观看Vue School出品的 Nuxt.js 页面组件 的免费课程
<template><h1 class="red">Hello {{ name }}!</h1>
</template><script>
export default {asyncData (context) {// called every time before loading the componentreturn { 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 根目录下的布局文件)。详情请参考 关于 布局 的文档。
|
loading |
如果设置为false ,则阻止页面自动调用this.$nuxt.$loading.finish() 和this.$nuxt.$loading.start() ,您可以手动控制它,请看例子,仅适用于在nuxt.config.js中设置loading 的情况下。请参考API配置 loading 文档。
|
transition | 指定页面切换的过渡动效, 详情请参考 页面过渡动效。 |
scrollToTop |
布尔值,默认: false 。 用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于 嵌套路由的应用场景。
|
validate | 校验方法用于校验 动态路由的参数。 |
middleware | 指定页面的中间件,中间件会在页面渲染之前被调用, 请参考 路由中间件。 |
关于页面配置项的详细信息,请参考 页面 API。
HTML 头部
Nuxt.js 使用了 vue-meta
更新应用的 头部标签(Head)
and html 属性
。
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
字段里配置就可以了:
注意: Nuxt.js 使用 hid
而不是默认值 vmid
识别元素key
一个使用自定义 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
的更多信息。
NUXT: 视图和模板相关推荐
- Django 视图和模板1.4
视图 在django中,视图对WEB请求进行回应 视图接收reqeust对象作为第一个参数,包含了请求的信息 视图就是一个Python函数,被定义在views.py中 #coding:utf-8 fr ...
- 修改了模板文件tpl如何立即生效_Views视图与模板
一.概述 用户请求到视图流程: 当有人访问我们django项目的时候 例如127.0.0.1:8000/polls/23,django首先到加载mysite.urls模块 在mysite.urls中发 ...
- 【Flask】官方教程(Tutorial)-part2:蓝图-视图、模板、静态文件
前序文章: 官方教程(Tutorial)-part1:项目布局.应用程序设置.定义和访问数据库 蓝图-视图 视图函数是您为响应应用程序请求而编写的代码.Flask 使用模式将传入的请求 URL 与应该 ...
- thinkphp5.0学习(九):TP5.0视图和模板
原文地址:http://blog.csdn.net/fight_tianer/article/details/78602711 一.视图 1.加载页面 1.继承系统控制器类return $this-& ...
- php yaf smarty,Yaf 结合用户自定义的视图(模板)引擎Smarty(Yaf + Smarty)
Yaf 结合用户自定义的视图(模板)引擎Smarty(Yaf + Smarty) 来源:互联网 作者:佚名 时间:2015-08-06 07:55 对完成某个任务进行计时可使用progress_tim ...
- 复习django项目三——视图显示模板templates
1.在项目根目录创建templates文件夹,并在setting里设置模板路径DIR TEMPLATES = [{'BACKEND': 'django.template.backends.django ...
- django的视图与模板
一.概述 一个视图就是一个页面,通常提供特定的功能,使用特定的模板.例如:在一个博客应用中,你可能会看到下列视图: 博客主页:显示最新发布的一些内容 每篇博客的详细页面:博客的永久链接 基于年的博客页 ...
- views视图函数-模板语法
一.Django基础–views视图函数 "这是我参与更文挑战的第2天,活动详情查看: 更文挑战" 视图 CBV和FBV FBV function based view ,平常用函 ...
- Django视图与模板+vs2019
View视图,负责业务逻辑,并在适当的时候调用Model和Template http请求中产生的两个核心的对象:HttpRequest(http请求),HttpResponse(http响应) req ...
最新文章
- 递增三元组蓝桥杯c语言,第九届蓝桥杯_递增三元组(枚举的优化思路)
- Django--models一对多实例
- Zookeeper分布式一致性原理(八):Zookeeper典型应用场景
- Linux 设备文件的创建和mdev
- asp 可否压缩_怎样用ASP压缩文件
- creator2.0.2 native游戏截屏微信分享
- centos7/rhel7下安装redis4.0集群
- emacs .emacs_使用Emacs应该做的6件事
- delphi idtcpclient 发送十六进制00_25656红单足球预测 中超 20:00 山东鲁能泰山 VS 大连人...
- 多家公司布局大数据基金 策略模型待检验
- Stereoscopic Player播放器的控制
- VMware虚拟机12个使用技巧
- 学习笔记:强化学习之A3C代码详解
- [转]中国象棋谚语大全
- php定做单城市公交路线查询系统
- linux查看无线网卡漫游,linux 无线命令
- 某军事APP测试随手记
- ValueError: The list of inputs passed to the model is redundant. All inputs should only appear once.
- python手机自动回复_用python itchat写一个微信机器人自动回复
- 一个爬虫练习游戏:黑板课爬虫闯关