Nuxt標準テンプレート、標準レイアウト、カスタムエラーページの実装

1657 ワード

Nuxt 標準テンプレート標準レイアウトカスタムエラーページ

一、標準テンプレートと標準レイアウト
一般的にいくつかの固定形式のウェブサイト、たとえばいくつかのウェブサイトの頭と底部は同じです。この時には標準テンプレートが使えます。
標準テンプレート
プロジェクトのルートディレクトリの下でapp.というファイルNuxtを作成すると、自動的にデフォルトのテンプレートとして認識されます。
使い方と文字列のつなぎ合わせは似ていますが、{HEAD}を頭の内容として、{APP}をページの主体として扱うことができます。
（HEADとAPPはすべて大文字で書く必要があります）


<!DOCTYPE html>
<html lang="en">
<head>
  {{HEAD}}
</head>
<body>
  <p>  1</p>
  {{APP}}
  <p>  2</p>
</body>
</html>

サーバを再起動すると効果が表示されます。
標準テンプレートを削除してもサーバを再起動してから有効になります。
標準レイアウト
デフォルトのレイアウトとデフォルトのテンプレートの違いは、デフォルトのレイアウトはタブ内のレイアウトのみを変更できます。標準テンプレートはページ全体を変更できます。
layouts/default.vueにデフォルトのレイアウトを設定します。


<template>
 <div>
  <p>  1</p>
  <nuxt />
  <p>  2</p>
 </div>
</template>

二、カスタムエラーページ
layouts/error.vueでエラーページを定義します。


              error    props    v-if v-else        

<template>
 <div>
  <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>

ここでNuxtのデフォルトテンプレート、デフォルトレイアウトとカスタムエラーページに関する記事を紹介します。これに関連して、Nuxtのデフォルトテンプレート、デフォルトレイアウトとカスタムエラーページの内容を紹介します。以前の記事を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。

JavaScript非同期動作のいくつかの一般的な処理方法の例をまとめました。

java.lang.NoSuchMethodErrのエラーを解決します。