CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Valor_
Valor_

Reputation: 3591

Change language on direct url input (VueJs)

I have implemented localisation with vue-i18n.

my 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();

my i18n.js plugin

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}
});

My routes

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

And my switch language function in my navigation component

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

So far everything ok and working when I switch language via upper function setLocale(). The problem appears when user inputs url directly for example:

I have currently selected english language and then user visits page directly via url, let's say: localhost:8080/sl/contact

If I understand documentation correctly I should configure this in routes with beforeEnter function. So my current implementation looks like this.

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

But this doesn't do the trick, because it's only working on second reload. So the cooke locale is set to correct language, but looks like them component code happens before so UI is still in old language. When I refresh again, then content of page is in correct language. How can I overcome this problem?

If you need any additional information's please let me know and I will provide. Thank you!

Upvotes: 2

Views: 4012

Answers (1)

Maga
Maga

Reputation: 81

When you navigate from localhost:8080/sl/contact to localhost:8080/en/contact, the same **'Contact'**vue component instance will be reused. Since both routes render the same component,

Please refer to the documentation:

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

To re-render the contact component you could either watch the $route object or use in-component navigation guards beforeRouteUpdate to react to changes and then reload your component or any application logic you wish to execute.

To know further about in-component navigation guards please refer to this link https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

Please try this,

Option 1:

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

Option 2:

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

Upvotes: 3

Related Questions