vue之每個頁面設置單獨的title,keywords,description等

router中設置每個頁面的標題,或者關鍵詞等

 {
          path: '/benefitCard',
          name: 'BenefitCard',
          component: BenefitCard,
          meta:{
            title:"題目",
            content:{
              keywords:"關鍵詞",
              description:"余益惠xxxxxxxxxx描述",
            },
          }
        },

導航守衛中

router.beforeEach((to, from, next) => {
/* 路由發生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title
}
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)
}
next()
})