简述

vue-meta 它可以更加优雅的来管理头部标签，它有如下几个特点：

在组件内设置 metaInfo，可以轻松实现头部标签的管理；
设置的 metaInfo 的数据是响应的；
支持 SSR。

安装

1	npm install vue-meta --save

引入

在 router/index.js 文件中引入。

1
2
3

import Meta from 'vue-meta'

Vue.use(Meta)

使用

首先我们可以在 App.vue 中添加如下代码：

export default {
  name: "App",
  metaInfo: {
    title: "首页",
    titleTemplate: "%s | xxxx",
  },
}

如果其他页面没有定义 metaInfo.title，将会默认使用此 title。

我们还可以在其他 vue 文件中这样使用：

export default {
  name: "About",
  metaInfo: {
    title: "关于",
  },
}

这样使用 title 将会替换 App.vue 中定义的 %s，最后显示为 关于 | xxxx。

如果 title 需要使用异步请求的数据，我们可以这样使用：

export default {
  name: "About",
  metaInfo() {
    return {
      title: this.metaTitle,
    };
  },
  data() {
    return {
      // 将需要设置的 title 信息利用异步请求获取到的数据保存在这里
      metaTitle: "",
    };
  },
}