# vue-meta

vue-meta

作用
安装
最终效果

# 作用

vue-meta is a Vue.js plugin that allows you to manage your app's metadata, much like react-helmet does for React. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the metaInfo property.

借用vue-meta 官网上的介绍，vue-meta是基于nuxt的分支插件，主要用于SPA单页应用管理 HTML 的meta元数据，同时也支持SSR。

# 安装

 npm i vue-meta -S

在入口文件main.js中直接引入，然后使用use方法直接调用。

import VueMeta from 'vue-meta'

Vue.use(VueMeta)

1
2
3

具体在 vue 文件内使用方法如下

export default {
  data() {
    return {
      pageTitle: '个人中心'
    }
  },
  metaInfo() {
    return {
      title: this.pageTitle,
      titleTemplate: '%s - Test',
      script: [{ innerHTML: 'console.log("Hey!~~!")', type: 'text/javascript' }]
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 最终效果

title

控制台console

← vue-i18n