VUE2.0——SEO优化动态Title、meta标签

安装vue-meta-info

npm i vue-meta-info -D

在main.js中引入

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

静态的title和meta用法

在你需要使用的组件中使用（切记不要写进了data中）

  metaInfo: {
    title: ``,
    meta: [
      {
        // set meta
        name: "description",
        content:
          "",
      },
      {
        name: "keywords",
        content: "",
      },
      {
        property: "release_date",
        content: "",
      },
    ],
  },

动态异步的title和meta用法

这个也和上面是一样的不是在data中的

  metaInfo() {
    return {
      title: this.pageName,
      meta: this.metaList,
    };
  },

这个是data我们要操作的数据

  data() {
    return {
      metaList: [
        //SEO优化的meta数组
        {
          name: "description",
          content: "",
        },
        {
          name: "keywords",
          content: "",
        },
        {
          property: "release_date",
          content: "",
        },
      ],
      }
    }

在组件的mounted周期中

    setTimeout(() => {
      let date = this.pipiload.gameTime;
      this.pageName = `${this.pipiload.hname}`;
      this.metaList[0].content = `${this.descriptionDate}`; // description
      this.metaList[1].content = `${this.pipiload.hname}`; //name="keywords"
      this.metaList[2].content = `${this.release_date}`;
    }, 2000);

动态去修改这个值就可以了
下面是详细的资料
vue-meta-info的官方文档