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()
})