nuxt 서버 렌 더 링 동적 설정 title 과 seo 키워드 작업

다음 갈 고 리 를 사용 하면 되 지만,전제 조건 은 헤드 를 기본 으로 설정 하지 않 은 title 입 니 다.

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

추가 지식:vue 각 페이지 동적 전환 title keywords description(seo 설정)
최근 에 서 를 사용 해 야 한 다 는 것 을 접 했 습 니 다.각 페이지 에 서로 다른 title,keywords,description 을 요구 합 니 다.
！！！여기에 먼저 한 단 계 를 추가 합 니 다:
html 파일 추가


첫 번 째 단 계 는 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 에서 설정 합 니 다.경로 가 바 뀌 어 페이지 meta 를 수정 합 니 다.
전 제 는 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()
});

구체 적 인 성공 여 부 는 f12 에서 확인 할 수 있 습 니 다.만약 나 오지 않 았 다 면 한 걸음 한 걸음 인쇄 해서 자신 이 어디 에 잘못 되 었 는 지 볼 수 있 습 니 다.
이상 의 nuxt 서버 렌 더 링 동적 설정 title 과 seo 키 워드 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.