wanghuipeng / vue-meta-info

设置vue 单页面meta info信息，如果需要单页面SEO，可以和 prerender-spa-plugin形成更优的配合

基于Vue 2.0 的单页面 meta info 管理.

<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>

• Description
• Disclaimer
• Installation
  • Yarn
  • NPM
• Usage
• Tips
• Examples

description

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

更多使用介绍：https://zhuanlan.zhihu.com/p/29148760?group_id=890298677627879424

Disclaimer

You have been warned. 有些情况下可能会存在一些还没有测到的bug，测试用例并没有完全覆盖所有的语句.

Installation

Yarn

$ yarn add vue-meta-info

NPM

$ npm install vue-meta-info --save

Usage

步骤1：全局引入vue-meta-info

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

Vue.use(MetaInfo)

步骤2：组件内静态使用 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>

Tips

如果你的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>

Examples

To run the examples; clone this repository & run npm install in the root directory, and then run npm run dev. Head to http://localhost:8080.