vue meta設置頁面

一、概述

在項目中，有一個搜索頁面，需要根據不同的關鍵字，動態修改meta信息，用於seo優化。

本文接下來介紹如何使用 vue-meta 修改頁面頭部信息

 

二、vue-meta使用

安裝

npm install --save vue-meta

 

main.js使用依賴

修改main.js，增加2行代碼

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

 

固定的meta

test.vue

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

<script>
    export default {
      name: "test",
      data() {
        return {};
      },
      metaInfo: {
        title: "頁面標題",
        meta: [
          { name: "keywords", content: "頁面關鍵字" },
          { name: "description", content: "頁面描述" },
        ],
      },
    }
</script>

<style scoped>

</style>

 

設置好路由之后，訪問頁面，查看head部分

 

可以發現，對應的值，已經修改了。 

 

動態的meta

根據請求數據，設置meta

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

<script>
    export default {
      name: "test",
      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 },
          ],
        };
      },
      mounted() {
        this.Init()
      },
      methods: {
        Init(){
          // 模擬接口獲取數據
          this.setting.title = "頁面標題1";
          this.setting.keywords = "頁面關鍵字1";
          this.setting.description = "頁面描述1";
        }
      }
    }
</script>

<style scoped>

</style>

 

設置好路由之后，訪問頁面，查看head部分

 

 

 

本文參考鏈接：

https://www.freesion.com/article/18001091411/