閱讀(5k) 書簽贊(0) 我要糾錯

Nuxt.js 視圖

2020-02-13 17:58 更新

本章節(jié)的內容闡述了如何在 Nuxt.js 應用中為指定的路由配置數(shù)據(jù)和視圖，包括應用模板、頁面、布局和HTML頭部等內容。

nuxt-views-schema

模板

你可以定制化 Nuxt.js 默認的應用模板。

定制化默認的 html 模板，只需要在應用根目錄下創(chuàng)建一個 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 目錄下創(chuàng)建自定義的布局。

默認布局

可通過添加 layouts/default.vue 文件來擴展應用的默認布局。

提示: 別忘了在布局文件中添加 <nuxt/> 組件用于顯示頁面的主體內容。

默認布局的源碼如下：

<template>
  <nuxt/>
</template>

自定義布局

layouts 目錄中的每個文件 (頂級) 都將創(chuàng)建一個可通過頁面組件中的 layout 屬性訪問的自定義布局。

假設我們要創(chuàng)建一個博客布局并將其保存到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>應用發(fā)生錯誤異常</h1>
    <nuxt-link to="/">首 頁</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // 你可以為錯誤頁面指定自定義的布局
}
</script>

頁面

頁面組件實際上是 Vue 組件，只不過 Nuxt.js 為這些組件添加了一些特殊的配置項（對應 Nuxt.js 提供的功能特性）以便你能快速開發(fā)通用應用。

<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	最重要的一個鍵, 支持異步數(shù)據(jù)處理，另外該方法的第一個參數(shù)為當前頁面組件的上下文對象。
fetch	與 `asyncData` 方法類似，用于在渲染頁面之前獲取數(shù)據(jù)填充應用的狀態(tài)樹（store）。不同的是 `fetch` 方法不會設置組件的數(shù)據(jù)。詳情請參考關于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	校驗方法用于校驗動態(tài)路由的參數(shù)。
middleware	指定頁面的中間件，中間件會在頁面渲染之前被調用，請參考路由中間件。

關于頁面配置項的詳細信息，請參考頁面 API。

HTML 頭部

Nuxt.js 使用了 vue-meta 更新應用的頭部標簽(Head) and html 屬性。

Nuxt.js 使用以下參數(shù)配置 vue-meta:

{
  keyName: 'head', // 設置 meta 信息的組件對象的字段，vue-meta 會根據(jù)這 key 值獲取 meta 信息
  attribute: 'n-head', // vue-meta 在監(jiān)聽標簽時所添加的屬性名
  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標簽不能正確覆蓋父組件中相同的標簽而產(chǎn)生重復的現(xiàn)象，建議利用 hid 鍵為meta標簽配一個唯一的標識編號。請閱讀關于 vue-meta 的更多信息。

以上內容是否對您有幫助：

← Nuxt.js 路由

Nuxt.js 異步數(shù)據(jù) →

寫筆記

我要補充