vue全局动态添加meta属性(title,keywords,description) 发布时间:2025/01/12 在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 内容,请继续关注编程基础学习网。