vue全局动态添加meta属性（title,keywords,description）

在Vue中动态地添加meta标签的keywords属性和description属性可以通过修改页面的头部信息来实现。下面小编给大家简单介绍一下具体操作代码！

vue全局动态添加meta属性代码

//打开main.js，在router.beforeEach里新增以下代码
router.beforeEach((to,from,next)=>{
  if(Object.keys(to.meta).length>0 && to.matched.length>0){
    let this_meta=to.matched[to.matched.length-1].meta
    //动态添加标题
    if(this_meta.title)document.title=this_meta.title
    let head = document.getElementsByTagName('head');
	//动态添加keywords
    let keyword = document.createElement('meta');
    if(document.querySelector('meta[name="keywords"]')){
      document.querySelector('meta[name="keywords"]').setAttribute('content',this_meta.keywords)
    }else{
      keyword.setAttribute('name','keywords')
      keyword.setAttribute('content',this_meta.keywords)
      head[0].appendChild(keyword)
    }
	//动态添加description
    let description = document.createElement('meta');
    if(document.querySelector('meta[name="description"]')){
      document.querySelector('meta[name="description"]').setAttribute('content',this_meta.description)
    }else{
      description.setAttribute('name','description')
      description.setAttribute('content',this_meta.description)
      head[0].appendChild(description)
    }
  }
  next()
})

以上是编程学习网小编为您介绍的“vue全局动态添加meta属性（title,keywords,description）”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。