利用vue-meta管理头部标签

2019-08-01 21:53:48 阅读：281 来源： 互联网

　　在 Vue SPA 应用中，如果想要修改HTML的头部标签，或许，你会在代码里，直接这么做

// 改下title
document.title = 'what?'
// 引入一段script
let s = document.createElement('script')
s.setAttribute('src', './vconsole.js')
document.head.appendChild(s)
// 修改meta信息，或者给html标签添加属性...
// 此处省略一大坨代码...

　　今天给大家介绍一种更优雅的方式，去管理头部标签： vue-meta。借用vue-meta github 上的介绍，基于Vue 2.0 的 vue-meta 插件，主要用于管理HMTL头部标签，同时也支持SSR。

　　vue-meta有以下特点：

　　1、在组件内设置 metaInfo，便可轻松实现头部标签的管理

　　2、metaInfo 的数据都是响应的，如果数据变化，头部信息会自动更新

　　3、支持 SSR

一、使用方法

　　安装：npm install vue-meta --save

　　引入：在main.js里引入

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

　　然后就可以开始使用metaInfo了。在任何一个component中都可以定义 metaInfo 属性

<script>
  export default {
    name: 'App',
    metaInfo: {
      // 如果子component中没有定义 metaInfo.title ，会默认使用这个title
      title: '首页',
      titleTemplate: '%s | 我的Vuejs网站'
    }
  }
</script>

<script>
  export default {
    name: 'Home',
    metaInfo: {
      // 这里的 title 会替换 titleTemplate 中的字符占位
      title: '这是一个首页',
      // 这里定义titleTemplate会覆盖App.vue中的定义
      titleTemplate: null
    }
  }
</script>

　　如果想定义其他meta信息，可以使用vue-meta的API。例如meta

{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}

　　异步请求数据定义：如果component中使用了异步请求数据，可以使用 metaInfo() 方法。

    metaInfo () {
      return {
        title: this.title,
        meta: [
          { vmid: 'description', name: 'description', content: this.description }
        ]
      }
    },

　　其中，title，description都可以是异步获取的数据。

标签：vue,name,title,标签,metaInfo,meta
来源： https://www.cnblogs.com/goloving/p/11285585.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

利用vue-meta管理头部标签