Nuxt.js 视图介绍

发布时间：2023-04-13 13:58:33 所属栏目：教程来源：

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

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

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

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>

</template>
<script>
export default {
layout: 'blog'
// page component deFinitions
}
</script>
点击查看演示视频了解自定义布局的实际效果。

错误页面
你可以通过编辑 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 提供的功能特性）以便你能快速开发通用应用。

<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 根目录下的布局文件）。详情请参考关于布局的文档。
loading   如果设置为false，则阻止页面自动调用this.$nuxt.$loading.finish()和this.$nuxt.$loading.start(),您可以手动控制它,请看例子,仅适用于在nuxt.config.js中设置loading的情况下。请参考API配置 loading 文档。
transition   指定页面切换的过渡动效, 详情请参考页面过渡动效。
scrollToTop   布尔值，默认: false。用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于嵌套路由的应用场景。
validate   校验方法用于校验动态路由的参数。
middleware   指定页面的中间件，中间件会在页面渲染之前被调用，请参考路由中间件。

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!