详解vue-meta如何让你更优雅的管理头部标签

下面是详解vue-meta如何让你更优雅的管理头部标签的攻略。

什么是vue-meta？

vue-meta 是在Vue中操作头部标签（meta 标签、title 标签等等）的一个插件。通过 vue-meta 可以让我们在 Vue 组件内方便的定义和修改这些标签。使用 vue-meta ，我们可以更加方便和优雅的管理头部标签，从而使得我们的网站更加 SEO 友好，更具优化性。

如何使用 vue-meta？

安装

npm install vue-meta --save

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta)

定义头部标签

在 Vue 组件中，我们可以通过 $meta 来定义和修改头部标签。例如：

export default {
  metaInfo: {
    title: '首页', // 网站标题
    meta: [
      { name: 'keywords', content: 'Vue, Webpack, Babel' }, // 关键字
      { name: 'description', content: '这是一个基于 Vue 的 Web 应用程序。' } // 描述
    ]
  }
}

通过上面的代码，我们就为我们的网站定义了一个标题、两个 meta 标签（keywords 和 description）。这样，在我们的网站中就会自动出现这些标签。通过这种方式，我们可以在页面级别上轻松定义和修改头部标签。

组件级别的覆盖

如果你在某个组件中也定义了一些头部标签，这些标签会自动覆盖全局定义。例如：

import Vue from 'vue'

export default Vue.extend({
  metaInfo: {
    title: '关于我们', // 页面标题
    meta: [
      { name: 'keywords', content: 'Vue, Webpack, Babel, 关于我们' }, // 关键字
      { name: 'description', content: '这是一个关于我们的页面。' } // 描述
    ]
  }
})

在这个组件中，我们重新定义了标题、关键字和描述，这些定义会覆盖全局定义。这样，我们就可以在组件级别上覆盖全局定义，实现更加精细化的控制。

vue-meta 常用配置

title

网站的标题。可以通过 titleTemplate 来实现动态标题。

export default {
  metaInfo: {
    title: '网站默认标题',
    titleTemplate: '%s | 我的网站'
  }
}

script

在头部插入一些 JavaScript 代码，例如 Google Analytics 跟踪代码。

export default {
  metaInfo: {
    script: [
      { src: 'https://www.google-analytics.com/analytics.js', async: true }
    ]
  }
}

link

在头部插入一些 CSS 样式表或者其他链接。

export default {
  metaInfo: {
    link: [
      { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bulma@0.5.0/css/bulma.min.css' }
    ]
  }
}

示例

下面给出两个示例，演示如何使用 vue-meta 定义和修改头部标签。

示例 1：定义网站标题和描述

<template>
  <div class="home">
    <h1>Hello, Vue.js!</h1>
  </div>
</template>

<script>
export default {
  metaInfo: {
    title: 'Vue.js 示例', // 网站标题
    meta: [
      { name: 'description', content: '这是一个基于 Vue.js 的示例程序。' } // 描述
    ]
  }
}
</script>

在这个示例中，我们为我们的网站定义了一个标题和一个描述。这样，当用户访问这个页面时，网站的标题和描述就会自动出现。

示例 2：动态设置网站标题

<template>
  <div class="post">
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: {
        title: '文章标题',
        content: '文章内容'
      }
    }
  },
  metaInfo: {
    title: function() {
      return this.post.title + ' | My Blog'
    }
  }
}
</script>

在这个示例中，我们没有设置网站的标题，而是使得它动态生成。我们通过 metaInfo 中的 title 属性设置了一个函数来计算网站的标题，这个函数会返回我们文章的标题和一个尾缀。这样，在用户访问这个页面时，网站的标题就会自动变成文章的标题。