vue-meta-info动态设置meta标签

2021-11-22

前言

vue-meta-info 是一个基于vue 2.0的插件，它会让你更好的管理你的 app 里面的 meta 信息。你可以直接在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化，自动更新你的title、meta等信息，那么用此插件也是再合适不过了。

一、vue-meta-info 使用方法

1.安装

npm i vue-meta-info –save

2.使用

在 main.js 文件中引入 vue-meta-info

import MetaInfo from ‘vue-meta-info

Vue.use(MetaInfo)

3.静态使用

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

4.动态使用

<template>
...
</template>

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

参考链接：vue-meta-info官网