vue-meta 设置页面 ＜meta＞

一、vue-meta 安装

npm install --save vue-meta

二、在 main.js 使用依赖

/*
 * Copyright © 2019-2020 LiuDanYang. All rights Reserved.
 */

import Vue from "vue";

import App from "./App.vue";
import store from "./store";
import router from "./router";

// 使用 vue-meta
import Meta from "vue-meta";
Vue.use(Meta);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

三、 页面设置固定的meta

<!--
  - Copyright © 2019-2020 LiuDanYang. All rights Reserved.
  -->

<template>
  <div class="container"></div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {};
  },
  metaInfo: {
    title: "页面标题",
    meta: [
      { name: "keywords", content: "页面关键字" },
      { name: "description", content: "页面描述" },
    ],
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped></style>

四、页面请求数据设置的meta

<!--
  - Copyright © 2019-2020 LiuDanYang. All rights Reserved.
  -->

<template>
  <div class="container"></div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      setting: {
        title: "",
        keywords: "",
        description: "",
      },
    };
  },
  metaInfo() {
    return {
      title: this.setting.title,
      meta: [
        { name: "keywords", content: this.setting.keywords },
        { name: "description", content: this.setting.description },
      ],
    };
  },
  created() {
    this.getSetting();
  },
  methods: {
    // 模拟接口获取数据
    setTimeout(() => {
      this.setting.title = "页面标题";
      this.setting.keywords = "页面关键字";
      this.setting.description = "页面描述";
    }, 2000);
  },
};
</script>

<style lang="scss" scoped></style>

五、效果 

参考：vue-meta 、vue-meta 文档