关于前端:如何使用VueMeta在Vue中添加元数据

在这篇文章中，咱们将探讨如何在咱们的我的项目中增加 vue-meta，并应用它来解决组件中的元数据。

什么是 vue-meta

“vue-meta 是提供 Vue 插件的模块，该插件使咱们可能动静增加组件中的元数据。

这意味着在咱们有多条路由的我的项目中，如果咱们想依据当前页面上出现的路由动静更新 SEO 的元标签，vue-meta 将为咱们解决，同时让咱们管制利用元数据。

Setup

首先，咱们须要将 vue-meta 增加到咱们的我的项目中，并让 Vue 晓得咱们想将其用作可用于所有组件的插件。

npm install vue-meta --save

而后，将 vue-meta 增加到咱们的主 js 文件中。

// main.js or index.js
import Vue from "vue";
import App from "./App.vue"; // main component
import Meta from "vue-meta";
Vue.use(Meta);
new Vue({render: h => h(App)
}).$mount("#app");

增加元数据

当初，咱们来看一个如何将元数据增加到组件的示例。

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {HelloWorld},
  metaInfo() {
    return {
      title: "test meta data with vue",
      meta: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta"
        }
      ]
    };
  }
};
</script>

能够看出，咱们能够通过调用“metaInfo”函数并返回一个对象作为蕴含咱们的元数据的值来做到这一点。

另外，咱们能够依据某些逻辑动静设置元值，因为咱们能够在组件级别拜访它。

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {HelloWorld},
  metaInfo() {
    const a = "test";
    return {
      title: "test meta data with vue",
      meta: [
        ...(a === "test" && [
          {
            vmid: "description",
            name: "description",
            content:
              "hello world, this is an example of adding a description with vue-meta"
          }
        ])
      ]
    };
  }
};
</script>

元数据类型

咱们能够应用“vue-meta”插件或多或少地增加所需的任何类型的元数据，无论它是 meta，title，link 还是 script。

在上面的内容中，咱们将看到无关如何增加其中一些元数据的示例。

<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {HelloWorld},
  metaInfo() {
    const a = "test";
    return {
      title: "test meta data with vue",
      meta: [
        ...(a === "test" && [
          {
            vmid: "description",
            name: "description",
            content:
              "hello world, this is an example of adding a description with vue-meta"
          }
        ])
      ],
            script: [{ src: '<https://services.postcodeanywhere.co.uk/js/address-3.91.js>', async: true, defer: true, body: true}
      ],
            link: [
        {
          rel: 'canonical',
          href: '<https://malikgabroun.com/>'
        }
            ]
    };
  }
};
</script>

在下面的示例中，咱们能够看到如何应用 vue-meta 将内部脚本增加到主体。在咱们心愿脚本蕴含在头部的状况下，咱们能够通过删除 body 标记来实现。

Vmid

到目前为止，咱们钻研了如何设置 vue-meta，并将元数据动静地增加到咱们的组件中，然而，如果咱们想在多个组件中设置特定属性的值，这将如何解决。

为了做到这一点，咱们能够应用 vmid，它是 vue-meta 提供给咱们的一个非凡属性，以便在组件树中解析该值。因而，如果两组元具备雷同的 vmid，它将笼罩它，应用最初更新的组件（即子组件）的值，而不是合并它。

总结

总而言之，vue-meta 是一个插件，在大多数 vue 框架中，它能够让咱们管制网站中的元数据应该如何显示。