vue-meta-info 使用方法

  1. 安装 vue-meta-info
    npm i vue-meta-info --save
  2. 使用
    main.js 文件中引入 vue-meta-info
    import MetaInfo from 'vue-meta-info';
    组件内静态使用 metaInfo
<template>
...
</template>

<script>
export default {
  metaInfo: {
    title: 'My Example App', // set a title
    meta: [{                 // set meta
      name: 'keyWords',
      content: 'My Example App'
    }]
    link: [{                 // set link
      rel: 'asstes',
      href: 'https://assets-cdn.github.com/'
    }]
  }
}
</script> 
组件内动态使用 metaInfo :这种方式可以动态生成META标签的内容,一般META标签的内容需要根据变量去变化的时候,可以选用这种方式。
<template>
...
</template>

<script>
export default {
  name: 'async',
  metaInfo () {
    return {
      title: this.pageName
    }
  },
  data () {
    return {
      pageName: 'loading'
    }
  },
  mounted () {
    setTimeout(() => {
      this.pageName = 'async'
    }, 2000)
  }
}
</script> 


作者:带刀打天下
链接:https://www.jianshu.com/p/50a8449a62c8
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
上一篇:利用vue-meta管理头部标签


下一篇:vue随笔无谓