时间戳

首页 > 解决方案 > 在VUE中切换语言时如何更改头部元数据？

javascript - 在VUE中切换语言时如何更改头部元数据？

问题描述

有人问这个问题吗？如果是，请给我阅读这个问题的链接，如果不是，怎么做？我想改变每个用户切换语言的标题和描述，我该怎么做？我确实喜欢得到一些帮助，我是。初学者：D

我有gallery.vue

我在这里使用 nuxt js

并使用基于 nuxt-i18n 的 vue-i18n

<template lang="html">

  <div class="">
    <p> {{ $t('post') }}</p>
  </div>

</template>

<script>
export default {
  head () {
    return {
      tittle: // how to change tittle here for the spesific languange
    }
  }
}
</script>

<style lang="css">
</style>

我想要这样的结果，比如在英语中标题为 Gallery 时，当用户切换 italianq 时，标题将是 Galleria

标签： javascriptvue.jsroutinginternationalizationnuxt.js

解决方案

这可能有点晚，但可以帮助新人。

根据文档，您可以使用函数来设置元数据，因此您可以使用函数访问数据并计算（包括此），检查代码：

head() {
 return {
  title: this.$t('myTitle'),
  htmlAttrs: {
    lang: this.$i18n.locale,
  },
  meta: [
    {
      hid: 'description',
      name: 'description',
      content: this.$t('myDescription'),
    },
  ],
 }

},

来源：https ://nuxtjs.org/docs/2.x/features/meta-tags-seo#local-settings

推荐阅读