Как включить ваш текущий язык в URL-адрес? (Nuxt.js/Vuetify)

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

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

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

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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
804
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы используете метод модуля nuxt/i18nlocalePath, ваш 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

Другие вопросы по теме