vue-meta-info: 基于Vue 2.0 的单页面 meta info 管理

3,352 阅读1分钟

vue-meta

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

Standard - JavaScript Style

npm version

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

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

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.