Vueはvueメタ情報を使用して各ページのタイトルとメタ情報を設定します。

title: vue は vue-meta-info を使用して各ページのタイトルとメタ情報を設定します #記事ページの表示名。通常は中国語です

date: 2019-11-20 16:30:16 #記事が作成された時間。通常は変更されません。もちろん、任意に修正できます。

カテゴリ: vue #カテゴリ

tags: [vue] #Article タグ、空でも可、複数タグの形式を使用してください、注意: 後ろにスペースがあります

説明: vue は vue-meta-info を使用して各ページのタイトルとメタ情報を設定します。

vue-meta-info を使用してタイトルとメタを設定するには、次の手順に従います。

1. インストール

npm インストール vue-meta-info --save

2. main.jsにインポートする

'vue-meta-info' から MetaInfo をインポートします。
Vue.use(メタ情報)

3. Vueページで設定する

<テンプレート>
  ...
</テンプレート>
 
<スクリプト>
  エクスポートデフォルト{
    メタ情報:
      title: 'My Example App', // タイトルを設定
      meta: [ // メタを設定する
      	{                
        	名前: 'キーワード',
        	内容: 「私のサンプルアプリ」
      	},
      	{
        	名前: '説明',
        	内容: 「これはウェブページの説明です」
   		 }
      ]
      link: [{ // リンクを設定
       		rel: 'asstes',
        	href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</スクリプト>

タイトルやメタが非同期で読み込まれる場合は、これを使用する必要があるかもしれません

<テンプレート>
  ...
</テンプレート>
 
<スクリプト>
  エクスポートデフォルト{
    名前: '非同期'、
    メタ情報() {
      戻る {
        タイトル: this.pageName
      }
    },
    データ （） {
      戻る {
        ページ名: '読み込み中'
      }
    },
    マウントされた（）{
      タイムアウトを設定する(() => {
        this.pageName = '非同期'
      }, 2000)
    }
  }
</スクリプト>

Vue SSR を使用してページをレンダリングする場合は、次の点に注意する必要があります。

動的な更新がないため、すべてのライフサイクルフック関数のうち、サーバー側レンダリング (SSR) プロセス中に呼び出されるのは beforeCreate と created のみです。つまり、他のライフサイクルフック関数 (beforeMount や mounted など) のコードはクライアント側でのみ実行されます。また、setInterval を使用してタイマーを設定するなど、beforeCreate および created ライフサイクル中にグローバルな副作用が発生するコードを避ける必要があることにも注意してください。クライアント側のみのコードでは、タイマーを設定し、beforeDestroy または destroy ライフサイクル中にそれを破棄することができます。ただし、SSR 中は destroy フック関数が呼び出されないため、タイマーは永久に保持されます。これを回避するには、副作用コードを beforeMount または mount ライフサイクルに移動します。

上記の制約に基づいて、現在、静的データを使用して metaInfo をレンダリングできます。次に例を示します。

<テンプレート>
  ...
</テンプレート>
 
<スクリプト>
  エクスポートデフォルト{
    メタ情報:
      title: 'My Example App', // タイトルを設定
      meta: [{ // メタを設定
        名前: 'キーワード',
        内容: 「私のサンプルアプリ」
      }]
      link: [{ // リンクを設定
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</スクリプト>

このとき、vueMetaInfo は、ssr のコンテキストでタイトル変数とレンダリングオブジェクトをマウントするのに役立ちます。次のようなものです:

コンテキスト = {
  ...
  タイトル: 「私のサンプルアプリ」
  与える： {
    メタ: 関数 () { ... },
    リンク: 関数 () { ... }
  }
}

この時点で、テンプレートを変換できます。

<!DOCTYPE html>
<html>
  <ヘッド>
    <メタ文字セット="utf-8">
    <タイトル>{{タイトル}}</タイトル>
    {{{render.meta && render.meta()}}}
    {{{render.link && render.link()}}}
  </head>
  <本文>
    <!--vue-ssr-outlet-->
  </本文>
</html>

これにより、必要なデータをレンダリングできるようになります。注目すべきは、

<テンプレート>
  ...
</テンプレート>
 
<スクリプト>
  エクスポートデフォルト{
    名前: '非同期'、
    メタ情報() {
      戻る {
        タイトル: this.pageName
      }
    },
    データ （） {
      戻る {
        ページ名: '読み込み中'
      }
    },
    マウントされた（）{
      タイムアウトを設定する(() => {
        this.pageName = '非同期'
      }, 2000)
    }
  }
</スクリプト>

知らせ：

このフォームはデータを定義するために使用されますが、サーバー側のレンダリングには create と beforeCreate 以外のマウントされたフックがないため、最終的にレンダリングされたタイトルはまだ読み込み中です。

要約する

これで、vue meta info を使用して各ページのタイトルとメタ情報を設定する方法についての記事は終了です。より関連性の高い vue 設定ページのタイトルとメタ情報の内容については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません: