美文网首页
vue 中使用 vue-meta-info

vue 中使用 vue-meta-info

作者: 带刀打天下 | 来源:发表于2019-06-17 11:08 被阅读0次
  • 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> 

相关文章

网友评论

      本文标题:vue 中使用 vue-meta-info

      本文链接:https://www.haomeiwen.com/subject/jqoofctx.html