vue-meta-info插件用法

作者: deepwinter 分类: 前端 发布时间: 2019-06-04 15:12 点击量: 536 次阅读

插件介绍

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

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注