vue中动态修改meta头部标签

hh22。

于 2020-11-13 18:59:29 发布

阅读量2.4k

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44953689/article/details/109680683

版权

笔记专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何使用vue-meta库在Vue.js应用中进行动态SEO优化。通过在main.js中引入并使用vue-meta，可以在不同路由下动态设置页面的title和meta信息，如description和keywords，从而提高搜索引擎的抓取效果。在app.vue组件中，通过获取外部数据来填充这些元信息，实现了内容更新时meta信息的实时同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考地址

使用案例

1. 安装

npm install vue-meta --save

2. main.js 中

// 动态修改meta搜索引擎
import Meta from 'vue-meta'
Vue.use(Meta)

app.vue页面中

<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
    </div> -->
    <router-view />
  </div>
</template>
<script>
import { keyWord } from "./assets/js/index.js";
export default {
  data() {
    return {
      title: "",
      description: "",
      description2: "",
    };
  },
  metaInfo() {
    return {
      title: this.title,
      meta: [
        { vmid: "description", name: "description", content: this.description },
        {
          vmid: "keywords",
          name: "keywords",
          content: this.description2,
        },
      ],
    };
  },

  created() {
    this.initData();
  },
  methods: {
    initData() {
      keyWord({
        siteId: window.localStorage.getItem("siteId"),
      }).then((res) => {
        // console.log(res);
        if ((res.code = 200)) {
          this.title = res.data.index_title;
          this.description = res.data.desc;
          this.description2 = res.data.keys;
        }
      });
    },
  },
};
</script>
<style>
</style>