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>

View Code