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: 视图和模板的全部內容，希望文章能夠幫你解決所遇到的問題。
