使用vue使用插件MetaInfo实现动态TDK（title，Keywords，description）

先看效果图：

一、安装：npm i vue-meta-info --save

二、在main.js中引入vue-meta-info

import Vue from 'vue'

import MetaInfo from 'vue-meta-info';

Vue.use(MetaInfo)

三、在vue文件中可以配置tdk

metaInfo: {

    title: '',

    meta: [{ 

      name: 'Keywords',

      content: ''

    }, {

      name: 'description',

      content: ''

    }],

 link: [{

  rel: 'asstes',

  href: 'https://assets-cdn.github.com/'

 }]

 },

以上是静态配置metaInfo

 

动态使用 metaInfo

<script>

export default {

  name: 'async',

  metaInfo () {

    return {

      title: this.pageName

    }

  },

  data () {

    return {

      pageName: 'loading'

    }

  },

  mounted () {

    setTimeout(() => {

      this.pageName = 'async'

    }, 2000)

  }

}

</script>