使用 Vue.js 制作多语言网站

Question

我对 Vue.js 不是很有经验，但我正在尝试用 Vue.js 制作一个多语言网站，想知道是否有有效的方法。例如，我不想为我拥有的每个页面创建重复的视图。是否有任何插件可用于该和有效路由来处理链接？这是我到目前为止想出的

在我的 vue 页面上 Menu.Vue。

<v-list-item>
   <v-list-item-title>English</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
 <router-link to="AnotherLanguagepage">
   AnotherLanguagepage
 </router-link>
</v-list-item-title>

路由器的index.js

{
    path: '/page_language1',
    name: 'Display',
    component: Display1,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/page_language2',
    name: 'Display',
    component: Display2,
    meta: {
      requiresAuth: true
    }
  },

所以我对这两种语言有看法，但这不是可扩展的方法。

Answer 1

如果您使用 Vue.js 查找多语言网站，您最好使用 Vue i18n plugin。

不，您的 page/components 中不需要多个视图或数据。基本上，您将拥有一个包含 en.js、es.js... 的 lang 文件夹（您需要多少 lang）。

// en.js

{
  "general": {
    "myListItemTitle": "My English title"
  }
}

// fr.js

{
  "general": {
    "myListItemTitle": "Mon titre français"
  }
}

<v-list-item>
   <v-list-item-title>{{ $t('general.myListItemTitle') }}</v-list-item-title>
</v-list-item>

// $t is calling plugin and refers to currentLocale (en, es...). Example: en.js

祝你好运！

使用 Vue.js 制作多语言网站

Making a multi language site with Vue.js

vue-router

vuejs2

vuetify.js