Изменить язык при прямом вводе URL (VueJs)

Question

Я реализовал локализацию с помощью vue-i18n.

мой main.js

import Vue from 'vue'
import { i18n } from './plugins/i18n'
import Cookie from "vue-cookie";

if (!Cookie.get('locale')) {
    Cookie.set('locale', 'en', 1)
}

new Vue({
    el: '#app',
    router,
    i18n,
    template: '<App/>',
    components: {App},
    render: h => h(App),
    mounted() {},
    data: {
        event: false
    }
}).$mount();

мой плагин i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enTranslations from '../../lang/en'
import slTranslations from '../../lang/sl'
import Cookie from 'vue-cookie'

Vue.use(VueI18n);

export const i18n = new VueI18n({
    locale: Cookie.get('locale'),
    fallbackLocale: 'en', // fallback option
    messages: { en: enTranslations, sl: slTranslations}
});

Мои маршруты

{
    path: '/:lang',
    component: {
        template: '<router-view></router-view>'
    },
    children: [
        {
            path: '',
            name: 'Home',
            component: Home
        },
        {
            path: 'contact',
            name: 'Contact',
            component: Contact
        }
    ]
}

И моя функция переключения языка в моем компоненте навигации

setLocale(locale) {
    let selectedLang = locale.toLowerCase();
    Cookie.set('locale', selectedLang, 1);
    this.$router.push({name: this.$route.name, params: {lang: selectedLang}});
    location.reload();
},

Пока все в порядке и работает, когда я переключаю язык с помощью верхней функции setLocale().Проблема возникает, когда пользователь вводит URL-адрес напрямую, например:

В настоящее время я выбрал английский язык, а затем пользователь заходит на страницу напрямую через URL, скажем: localhost:8080/sl/contact

Если я правильно понимаю документацию, яследует настроить это в маршрутах с функцией beforeEnter.Итак, моя текущая реализация выглядит следующим образом.

beforeEnter: (to, from, next) => {
    let selectedLang = to.params.lang.toLowerCase();
    Cookie.set('locale', selectedLang, 1);
    next();
},

Но это не сработает, потому что это работает только при второй перезагрузке.Таким образом, локаль cooke настроена на правильный язык, но выглядит так, как будто код компонента происходит раньше, поэтому пользовательский интерфейс все еще на старом языке.Когда я снова обновляюсь, содержимое страницы отображается на правильном языке.Как мне решить эту проблему?

Если вам нужна дополнительная информация, пожалуйста, сообщите мне, и я предоставлю.Спасибо!

Answer 1

При переходе от localhost: 8080 / sl / contact до localhost: 8080 / en / contact , тот же экземпляр ** 'Contact' ** vue будет использован повторно,Поскольку оба маршрута отображают один и тот же компонент,

Пожалуйста, обратитесь к документации:

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes.

Для повторного рендеринга компонента контакта вы можете либо посмотреть$ route object или используйте встроенные средства навигации по элементам beforeRouteUpdate , чтобы реагировать на изменения и затем перезагружать ваш компонент или любую логику приложения, которую вы хотите выполнить.

Чтобы узнать больше о компонентных навигационных средствах защиты, перейдите по этой ссылке https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

Пожалуйста, попробуйте это,

Вариант 1:

watch:{
   $route(to, from){
      let selectedLang = to.params.lang.toLowerCase();
      Cookie.set('locale', selectedLang, 1);
      //reload your component
 }

Вариант 2:

beforeRouteUpdate: (to, from, next) => {
  let selectedLang = to.params.lang.toLowerCase();
  Cookie.set('locale', selectedLang, 1);
  next();
},