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

wordpress获取当前文章ID自定义meta移动端链接

vue语法中$router和$route有什么不同？附示例代码

vue中的render函数的代码示例

vue前端如何埋点，代码介绍

vue语法中双击事件和单击事件出现冲突怎么解决

标签： meta属性, vue全局属性, vue语法

上面是“vue全局动态添加meta属性（title,keywords,description）”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_14404.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！