插件介绍

vue-meta-info是一个基于vue 2.0的插件，它会让你更好的管理你的app里面的meta信息。
你可以直接在组件内设置metaInfo便可以自动挂载到你的页面中。
如果你需要随着数据的变化，自动更新你的title、meta等信息，那么用此插件也是再合适不过了。 当然，有时候我们也可能会遇到让人头疼的SEO问题，那么使用此插件配合prerender-spa-plugin也是再合适不过了。

安装

npm install vue-meta-info -S

引入vue-meta-info

比如全局引入，在main.js中加入

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)

组件内静态使用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

如果你的title或者meta是异步加载的，那么你可能需要这样使用

<template>
  ...
</template>

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