如何在Nuxt中实现多语言切换？

Question

在我当前的项目中，我正在使用 nuxt.js 开发一个多语言网站。虽然

i18n

解决方案可用，但我的方法并不专注于将英语术语翻译成西班牙语或其他语言。我的目标是在专用目录中为每种语言构建单独的页面。 默认语言为英语，我计划创建一个名为

es

的目录来托管所有西班牙语页面。该目录可能具有以下结构：

pages
├── index.vue
├── somepage.vue
└── es
    ├── index.vue
    └── somepage.vue

默认英文页面可通过

example.com

和

example.com/somepage

访问，而等效的西班牙语主页和页面可通过

example.com/es

和

example.com/es/somepage

访问。

我的主要问题是：如何为用户集成语言切换下拉菜单？非常感谢您在解决此问题方面提供的帮助。尽管进行了彻底的在线研究，我遇到的大多数解决方案都与 i18n 相关。 i18n 可以处理这种特定情况吗？或者有其他方法吗？预先感谢您的帮助。

Answer 1

提供不同的语言切换路径

所以你的主要问题不是如何切换语言，而是当路由中的语言参数发生变化时如何加载不同的组件。

如果您坚持在 URL 中显示语言，您还需要在 Vue Router 中澄清这一点。您的主路线只会是

/:lang

，这允许您在每个子路线中包含该语言。您的实际页面将是其子路由。您需要使用

:lang

变量和与您自己的文件结构相对应的适当文件路径动态导入组件。

以下是如何实现此方法的示例：

/**
 ** Get Component
 */
const getComponentByLang = (resolve, route, componentPath) => {
  const lang = route.params.lang;
  return import(`./pages/${lang}/${componentPath}.vue`).then((component) => {
    resolve(component);
  });
};

/**
 ** Routes
 */
const routes: [
  // Main Route (/es or /en ...)
  {
    path: '/:lang',
    children: [
      // Sub Route (/es/articles/title or /en/articles/title ...)
      // Load /langFolder/Articles/Show.vue
      {
        path: '/articles/:name',
        component: (resolve, route) => getComponentByLang(resolve, route, 'Articles/Show')
      },
      // Sub Route (/es/topics/title or /en/topics/title ...)
      // Load /langFolder/Topics/Index.vue
      {
        path: '/topics/:name',
        component: (resolve, route) => getComponentByLang(resolve, route, 'Topics/Index')
      }
    ],
  },
];

更多信息：

Vue-Router 上的嵌套路由

Vue-Router 上的延迟组件加载

---

有必要将每个组件放在自己的语言文件夹中，包括英语的。

# normal directory tree
server
├── your-project
│   ├── pages
│   │   ├── en
│   │   │   ├── index.vue
│   │   │   └── somepage.vue
│   │   └── es
│   │       ├── index.vue
│   │       └── somepage.vue
│   ├── ...

const getComponentByLang = (resolve, route, componentPath) => {
  const lang = route.params.lang;
  return import(`./pages/${lang}/${componentPath}.vue`).then((component) => {
    resolve(component);
  });
};

或者，您可以在定义组件路径时将英语声明为例外。

# normal directory tree
server
├── your-project
│   ├── pages
│   │   ├── index.vue
│   │   ├── somepage.vue
│   │   └── es
│   │       ├── index.vue
│   │       └── somepage.vue
│   ├── ...

const getComponentByLang = (resolve, route) => {
  const lang = route.params.lang;
  const path = lang === 'en' ? `./pages/${componentPath}.vue` : `./pages/${lang}/${componentPath}.vue`
  return import(path).then((component) => {
    resolve(component);
  });
};

---

两种情况下的语言选择

概括地说...您需要一个列出可选择语言的数组。然后，您创建一个下拉菜单，在其中填充该数组中的选项。当下拉列表中的值发生变化时，您可以调用语言选择功能。假设您的所有页面都有翻译，在此功能中，您将用所选语言替换当前 URL 的“语言”部分。例如，如果当前 URL 是

example.com/en/articles/mycurrenttitle

，选择新语言后，URL 将变为

example.com/es/articles/mycurrenttitle

。

<template>
  <div>
    <label for="language">Select Language:</label>
    <select id="language" v-model="selectedLanguage" @change="changeLanguage">
      <option v-for="language in languages" :value="language.value" :key="language.value">{{ language.label }}</option>
    </select>

    <p>Current URL: {{ currentUrl }}</p>
    <p>Selected Language: {{ selectedLanguage }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const languages = ref([
  { label: 'English', value: 'en' },
  { label: 'Español', value: 'es' }
]);
const selectedLanguage = ref('');
const currentUrl = ref('');

const router = useRouter();
const route = useRoute();

const changeLanguage = () => {
  if (selectedLanguage.value) {
    const newUrl = route.path.replace(/^\/(en|es)/, `/${selectedLanguage.value}`);
    router.push(newUrl);
  }
};

onMounted(() => {
  currentUrl.value = route.path;
  const langMatch = currentUrl.value.match(/^\/(en|es)/);
  selectedLanguage.value = langMatch ? langMatch[1] : '';
});
</script>

Answer 2

使用vue-多语言插件 供参考，请在此处查看 https://www.npmjs.com/package/vue-multilingual