NUXT: 视图和模板
視圖
本章節(jié)的內(nèi)容闡述了如何在 Nuxt.js 應(yīng)用中為指定的路由配置數(shù)據(jù)和視圖，包括應(yīng)用模板、頁面、布局和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)布局
可通過添加?layouts/default.vue?文件來擴(kuò)展應(yīng)用的默認(rèn)布局。
提示:?別忘了在布局文件中添加?<nuxt/>?組件用于顯示頁面的主體內(nèi)容。
默認(rèn)布局的源碼如下：
<template><nuxt/> </template>自定義布局
layouts?目錄中的每個(gè)文件 (頂級(jí)) 都將創(chuàng)建一個(gè)可通過頁面組件中的?layout?屬性訪問的自定義布局。
假設(shè)我們要?jiǎng)?chuàng)建一個(gè)?博客布局?并將其保存到layouts/blog.vue:
<template><div><div>我的博客導(dǎo)航欄在這里</div><nuxt/></div> </template>然后我們必須告訴頁面 (即pages/posts.vue) 使用您的自定義布局：
<template> <!-- Your template --> </template> <script> export default {layout: 'blog'// page component definitions } </script>更多有關(guān)?layout?屬性信息:?API 頁面?布局
點(diǎn)擊查看?演示視頻?了解自定義布局的實(shí)際效果。
錯(cuò)誤頁面
你可以通過編輯?layouts/error.vue?文件來定制化錯(cuò)誤頁面.
警告:?雖然此文件放在?layouts?文件夾中, 但應(yīng)該將它看作是一個(gè)?頁面(page).
這個(gè)布局文件不需要包含?<nuxt/>?標(biāo)簽。你可以把這個(gè)布局文件當(dāng)成是顯示應(yīng)用錯(cuò)誤（404，500等）的組件。
默認(rèn)的錯(cuò)誤頁面源碼在?這里.
舉一個(gè)個(gè)性化錯(cuò)誤頁面的例子?layouts/error.vue:
<template><div class="container"><h1 v-if="error.statusCode === 404">頁面不存在</h1><h1 v-else>應(yīng)用發(fā)生錯(cuò)誤異常</h1><nuxt-link to="/">首 頁</nuxt-link></div> </template><script> export default {props: ['error'],layout: 'blog' // 你可以為錯(cuò)誤頁面指定自定義的布局 } </script>頁面
頁面組件實(shí)際上是 Vue 組件，只不過 Nuxt.js 為這些組件添加了一些特殊的配置項(xiàng)（對(duì)應(yīng) Nuxt.js 提供的功能特性）以便你能快速開發(fā)通用應(yīng)用。
觀看Vue School出品的?Nuxt.js 頁面組件?的免費(fèi)課程
<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 為頁面提供的特殊配置項(xiàng)：
| asyncData | 最重要的一個(gè)鍵, 支持?異步數(shù)據(jù)處理，另外該方法的第一個(gè)參數(shù)為當(dāng)前頁面組件的?上下文對(duì)象。 |
| fetch | 與?asyncData?方法類似，用于在渲染頁面之前獲取數(shù)據(jù)填充應(yīng)用的狀態(tài)樹（store）。不同的是?fetch?方法不會(huì)設(shè)置組件的數(shù)據(jù)。詳情請(qǐng)參考?關(guān)于fetch方法的文檔。 |
| head | 配置當(dāng)前頁面的 Meta 標(biāo)簽, 詳情參考?頁面頭部配置API。 |
| layout | 指定當(dāng)前頁面使用的布局（layouts?根目錄下的布局文件）。詳情請(qǐng)參考?關(guān)于 布局 的文檔。 |
| loading | 如果設(shè)置為false，則阻止頁面自動(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 | 指定頁面切換的過渡動(dòng)效, 詳情請(qǐng)參考?頁面過渡動(dòng)效。 |
| scrollToTop | 布爾值，默認(rèn):?false。 用于判定渲染頁面前是否需要將當(dāng)前頁面滾動(dòng)至頂部。這個(gè)配置用于?嵌套路由的應(yīng)用場(chǎng)景。 |
| validate | 校驗(yàn)方法用于校驗(yàn)?動(dòng)態(tài)路由的參數(shù)。 |
| middleware | 指定頁面的中間件，中間件會(huì)在頁面渲染之前被調(diào)用， 請(qǐng)參考?路由中間件。 |
關(guān)于頁面配置項(xiàng)的詳細(xì)信息，請(qǐng)參考?頁面 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)聽標(biāo)簽時(shí)所添加的屬性名ssrAttribute: 'n-head-ssr', // 讓 vue-meta 獲知 meta 信息已完成服務(wù)端渲染的屬性名tagIDKeyName: 'hid' // 讓 vue-meta 用來決定是否覆蓋還是追加 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è)性化特定頁面的 Meta 標(biāo)簽
關(guān)于個(gè)性化特定頁面的 Meta 標(biāo)簽，請(qǐng)參考?頁面頭部配置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?的更多信息。
總結(jié)
以上是生活随笔為你收集整理的NUXT: 视图和模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
