Nuxt.js 視圖
本章節(jié)的內(nèi)容闡述了如何在 Nuxt.js 應(yīng)用中為指定的路由配置數(shù)據(jù)和視圖，包括應(yīng)用模板、頁(yè)面、布局和HTML頭部等內(nèi)容。
模板
你可以定制化 Nuxt.js 默認(rèn)的應(yīng)用模板。
定制化默認(rèn)的 html 模板，只需要在應(yīng)用根目錄下創(chuàng)建一個(gè) app.html 的文件。
默認(rèn)模板為：
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>舉個(gè)例子，你可以修改模板添加 IE 的條件表達(dá)式：
<!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 允許你擴(kuò)展默認(rèn)的布局，或在 layout 目錄下創(chuàng)建自定義的布局。
默認(rèn)布局
可通過(guò)添加 layouts/default.vue 文件來(lái)擴(kuò)展應(yīng)用的默認(rèn)布局。
提示: 別忘了在布局文件中添加 <nuxt/> 組件用于顯示頁(yè)面的主體內(nèi)容。
默認(rèn)布局的源碼如下：
<template>
<nuxt/>
</template>自定義布局
layouts 目錄中的每個(gè)文件 (頂級(jí)) 都將創(chuàng)建一個(gè)可通過(guò)頁(yè)面組件中的 layout 屬性訪問(wèn)的自定義布局。
假設(shè)我們要?jiǎng)?chuàng)建一個(gè) 博客布局 并將其保存到layouts/blog.vue:
<template>
<div>
<div>我的博客導(dǎo)航欄在這里</div>
<nuxt/>
</div>
</template>然后我們必須告訴頁(yè)面 (即pages/posts.vue) 使用您的自定義布局：
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'blog'
// page component definitions
}
</script>更多有關(guān) layout 屬性信息: API 頁(yè)面 布局
點(diǎn)擊查看 演示視頻 了解自定義布局的實(shí)際效果。
錯(cuò)誤頁(yè)面
你可以通過(guò)編輯 layouts/error.vue 文件來(lái)定制化錯(cuò)誤頁(yè)面.
警告: 雖然此文件放在 layouts 文件夾中, 但應(yīng)該將它看作是一個(gè) 頁(yè)面(page).
這個(gè)布局文件不需要包含 <nuxt/> 標(biāo)簽。你可以把這個(gè)布局文件當(dāng)成是顯示應(yīng)用錯(cuò)誤（404，500等）的組件。
默認(rèn)的錯(cuò)誤頁(yè)面源碼在 這里.
舉一個(gè)個(gè)性化錯(cuò)誤頁(yè)面的例子 layouts/error.vue:
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">頁(yè)面不存在</h1>
<h1 v-else>應(yīng)用發(fā)生錯(cuò)誤異常</h1>
<nuxt-link to="/">首 頁(yè)</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'blog' // 你可以為錯(cuò)誤頁(yè)面指定自定義的布局
}
</script>頁(yè)面
頁(yè)面組件實(shí)際上是 Vue 組件，只不過(guò) Nuxt.js 為這些組件添加了一些特殊的配置項(xiàng)（對(duì)應(yīng) Nuxt.js 提供的功能特性）以便你能快速開(kāi)發(fā)通用應(yīng)用。
<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 為頁(yè)面提供的特殊配置項(xiàng)：
| 屬性名 | 描述 |
|---|---|
| asyncData | 最重要的一個(gè)鍵, 支持 異步數(shù)據(jù)處理，另外該方法的第一個(gè)參數(shù)為當(dāng)前頁(yè)面組件的 上下文對(duì)象。 |
| fetch | 與 asyncData 方法類似，用于在渲染頁(yè)面之前獲取數(shù)據(jù)填充應(yīng)用的狀態(tài)樹(shù)（store）。不同的是 fetch 方法不會(huì)設(shè)置組件的數(shù)據(jù)。詳情請(qǐng)參考 關(guān)于fetch方法的文檔。 |
| head | 配置當(dāng)前頁(yè)面的 Meta 標(biāo)簽, 詳情參考 頁(yè)面頭部配置API。 |
| layout | 指定當(dāng)前頁(yè)面使用的布局（layouts 根目錄下的布局文件）。詳情請(qǐng)參考 關(guān)于 布局 的文檔。 |
| loading | 如果設(shè)置為false，則阻止頁(yè)面自動(dòng)調(diào)用this.$nuxt.$loading.finish()和this.$nuxt.$loading.start(),您可以手動(dòng)控制它,請(qǐng)看例子,僅適用于在nuxt.config.js中設(shè)置loading的情況下。請(qǐng)參考API配置 loading 文檔。 |
| transition | 指定頁(yè)面切換的過(guò)渡動(dòng)效, 詳情請(qǐng)參考 頁(yè)面過(guò)渡動(dòng)效。 |
| scrollToTop | 布爾值，默認(rèn): false。 用于判定渲染頁(yè)面前是否需要將當(dāng)前頁(yè)面滾動(dòng)至頂部。這個(gè)配置用于 嵌套路由的應(yīng)用場(chǎng)景。 |
| validate | 校驗(yàn)方法用于校驗(yàn) 動(dòng)態(tài)路由的參數(shù)。 |
| middleware | 指定頁(yè)面的中間件，中間件會(huì)在頁(yè)面渲染之前被調(diào)用， 請(qǐng)參考 路由中間件。 |
關(guān)于頁(yè)面配置項(xiàng)的詳細(xì)信息，請(qǐng)參考 頁(yè)面 API。
HTML 頭部
Nuxt.js 使用了 vue-meta 更新應(yīng)用的 頭部標(biāo)簽(Head) and html 屬性。
Nuxt.js 使用以下參數(shù)配置 vue-meta:
{
keyName: 'head', // 設(shè)置 meta 信息的組件對(duì)象的字段，vue-meta 會(huì)根據(jù)這 key 值獲取 meta 信息
attribute: 'n-head', // vue-meta 在監(jiān)聽(tīng)標(biāo)簽時(shí)所添加的屬性名
ssrAttribute: 'n-head-ssr', // 讓 vue-meta 獲知 meta 信息已完成服務(wù)端渲染的屬性名
tagIDKeyName: 'hid' // 讓 vue-meta 用來(lái)決定是否覆蓋還是追加 tag 的屬性名
}默認(rèn) Meta 標(biāo)簽
Nuxt.js 允許你在 nuxt.config.js 里定義應(yīng)用所需的所有默認(rèn) meta 標(biāo)簽，在 head 字段里配置就可以了：
注意: Nuxt.js 使用 hid 而不是默認(rèn)值 vmid 識(shí)別元素key
一個(gè)使用自定義 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 變量的所有可選項(xiàng)的話，請(qǐng)查閱 vue-meta 使用文檔。
關(guān)于 Nuxt.js 應(yīng)用 HTML 頭部配置的更多信息，請(qǐng)參考 HTML 頭部配置 API。
個(gè)性化特定頁(yè)面的 Meta 標(biāo)簽
關(guān)于個(gè)性化特定頁(yè)面的 Meta 標(biāo)簽，請(qǐng)參考 頁(yè)面頭部配置API。
注意: 為了避免子組件中的meta標(biāo)簽不能正確覆蓋父組件中相同的標(biāo)簽而產(chǎn)生重復(fù)的現(xiàn)象，建議利用 hid 鍵為meta標(biāo)簽配一個(gè)唯一的標(biāo)識(shí)編號(hào)。請(qǐng)閱讀關(guān)于 vue-meta 的更多信息。
更多建議：