nuxtサーバレンダリングダイナミック設定titleとseoキーワードの操作

下記のフックを使えばいいですが、前提条件はデフォルト設定のhead titleがないことです。

asyncData ({ app }, callback) {
app.head.title = ‘new title'
callback(null, {})
},

補足知識：vue各ページの動的切り替えtitle keywords description（seoの設定）
最近はSeoを使う必要があります。各ページには異なるtitle、keywords、descriptionが必要です。
！ここに先にステップを追加します。
ファイルを追加
＜meta data-n-head=“1”data-hid=“description”name=“description”content=“”
＜metadata-n-head=“1”data-hid=“keywords”name=“keywords”content=“”
第一歩はrouterの中のindex.jsフォルダにあります。

routes: [
  {
   path: '/',
   name: 'main',
   component: Main,
   meta: {
    title: '  title  ',
    content:{
     keywords:'      keywords',
     description:'      description',
    },
   
   }
  },
  {
   path: '/trueBag',
   name: 'trueBag',
   component: trueBag,
   meta: {
   title: 'trueBag   title  ',
    content:{
    keywords:'      keywords',
     description:'      description',
    },
   }
  },
  ]

二番目のステップはmain.jsに設定され、ルートが変更されました。
前提はもうrouterを導入しました。

//         ，        
//          meta,     keywords   description   ，
//          :
// setAttribute               router   content     
//         
//document.querySelector(‘meta[name=“description”]').setAttribute(‘content', to.meta.content.description)

router.beforeEach((to, from, next) => {
 /*           meta */
 console.log(to.meta.content)
 if(to.meta.content){
  let head = document.getElementsByTagName('head');
  let meta = document.createElement('meta');
  document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.content.keywords)
  document.querySelector('meta[name="description"]').setAttribute('content', to.meta.content.description)
  meta.content = to.meta.content;
  head[0].appendChild(meta)
 }
 // /*           title */
 if (to.meta.title) {
  document.title = to.meta.title;
 }
 next()
});

具体的に成功したかどうかは調べてもいいです。もし出てこなかったら、一歩ずつ印刷してみてください。自分がどこで間違えたかを確認してください。
以上のnuxtサーバーのレンダリングダイナミック設定titleとseoキーワードの操作は小編集が皆さんに提供した内容の全部です。参考にしていただければ幸いです。どうぞよろしくお願いします。