Блог

Мне нужно включить мой язык (en / nl) в мой URL-адрес моего проекта nuxt.js / vuetify, я использовал i18n для перевода. Я попытался использовать встроенную функцию динамической маршрутизации, добавив префикс подчеркивания в имя моего каталога, например, папка _lang, включает индекс страниц vue, галерею и о нас. функция обещает, что из-за подчеркивания часть url для _lang может быть любой.

Например: localhost:3000/lang/gallery также может быть localhost:3000/randomstring/gallery , это не имеет значения. я попытался получить и установить эту «случайную строку», используя глобальную переменную маршрутизации ($route.params.[randomstring]) , я мог только получить ее, а не установить. Поэтому, когда я меняю язык (используя i18n), для «randomstring» не может быть установлено то же имя, что и для выбранного языка.

Моим единственным обходным путем было использование свойства ‘base’ компонента vue-router путем жесткого кодирования переменной среды процесса после значения по умолчанию («/»).

Другим обходным путем было бы дублировать все страницы и переводить их с помощью жесткого кода в соответствующую папку (папку ‘en’ и папку ‘nl’, включая все 3 страницы). но это не будет устойчивым, поскольку вы добавляете страницы на сайт.

TL DR: Как динамически добавлять локаль в ваш проект nuxt.js / vuetify (используя i18n)?

Используемая документация: https://nuxtjs.org/docs/2.x/features/file-system-routing

При использовании метода модуля nuxt / i18n localePath ваш URL-адрес изменится в соответствии с текущей активной локалью.

 <nuxt-link :to="localePath('about')">Go to about page</nuxt-link>.
 

Перенаправит вас на: /fr/about если ‘fr’ (французский) является активным языком.

Чтобы установить язык, используйте setLocale метод:

 <button @click="$i18n.setLocale('fr')">Set Locale</button>
 

Дополнительную ссылку на API nuxt / i18n можно найти здесь: https://i18n.nuxtjs.org/api#methods-1