nuxt各ページheadラベルの内容設定方式

読み解く
前のいくつかのコースの中で、私達はすでにトップページ、jokesページ、Aboutページの開発を完成しました。続いて、各ページのheadタグを見てみます。
内容は、この3つのページのラベルが一致しています。nuxt.com fig.jsプロファイルのhead構成と一致しています。
したがって、私たちはこの3つのページに単独でヘッドを行う必要があります。SEOの最適化により、検索エンジンの登用がより便利です。
はい、私たちはindex.vueを開いて、編集者は以下の通りです。

head(){
 return {
  title: 'jokes home page',
  meta: [{
  hid: "description",
  name: "description",
  content: "this is funny jokes home page"
  },{
  hid: 'viewport',
  name: 'viewport',
  content: 'width=device-width, initial-scale=1.0'
  }]
 }
 },

私たちは再びjokes.vueを開いて、編集者は以下の通りです。

head(){
 return {
  title: 'jokes page',
  meta: [{
  hid: "description",
  name: "description",
  content: "funny jokes page"
  }]
 }
 },

about.vueを開いて、下記のように編集します。

head(){
 return {
  title: 'about page',
  meta: [{
  hid: "page description",
  name: "description",
  content: "funny jokes about page"
  }]
 }
},

設定を変更するたびに、現在のページのソースコードを開いて確認してみます。サービス端末で新しいヘッドラベルの内容が有効ですか？
補充知識：nuxtは単独のページまたはコンポーネントにjsを注入する。
コードは以下の通りです

 head() {
 return {
  script: [
  {
   charset: 'utf-8',
   src:'https://map.qq.com/api/js?v=2.exp&key=3',
   body: true
  },
  {
   type: 'text/javascript',
   src: 'https://3gimg.qq.com/lightmap/api_v2/2/4/127/main.js',
   body: true
  },
  {
   type: 'text/javascript',
   src:'https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js',
   body: true
  }
  ]
 }
 },

地図は一つのページでしか使えないので、全体を紹介する必要はないです。単一のページで使います。

以上のnuxt各ページのheadタグの内容の設定方法は、小編集が皆さんに提供した内容の全部を共有しています。参考にしていただければと思います。よろしくお願いします。