如何使用Vue-Meta在Vue中添加元數據

時間 2020-08-21

標籤如何使用 vue meta 添加數據欄目 HTML5 简体版

原文原文鏈接

在這篇文章中，咱們將探討如何在咱們的項目中添加vue-meta，並使用它來處理組件中的元數據。javascript

什麼是vue-meta

「vue-meta 是提供Vue插件的模塊，該插件使咱們可以動態添加組件中的元數據。html

這意味着在咱們有多條路由的項目中，若是咱們想根據當前頁面上呈現的路由動態更新SEO的元標籤，vue-meta將爲咱們處理，同時讓咱們控制應用元數據。vue

Setup

首先，咱們須要將vue-meta添加到咱們的項目中，並讓Vue知道咱們想將其用做可用於全部組件的插件。java

npm install vue-meta --save

而後，將vue-meta添加到咱們的主js文件中。npm

// 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");

添加元數據

如今，咱們來看一個如何將元數據添加到組件的示例。bash

<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」函數並返回一個對象做爲包含咱們的元數據的值來作到這一點。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() {
    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。async

在下面的內容中，咱們將看到有關如何添加其中一些元數據的示例。函數

<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標誌來實現。