Change language and url slug

I wanted help to change the corresponding link with the language.
Imagine.

I am in the FR language and I am on the page (…/page/terms-et-services), and if I am on the same page and change the language to EN, it doesn’t change to the page (…/page/terms-and-services), it only changes if I go to the footer menu and click on the terms and then it goes to the page (…/page/terms-and-services).

I wanted, for example, if it was in the FR language with the link (/page/terms-et-services) and changed the language to EN it would go to the page (/page/terms-of-service), but this would only happen if the user was on the link (/page)

In the footer menu I use it this way.

<li v-if="legal.visibility" v-for="(legal, index) in config.legal.filter(legal => legal.lang === getLocale())" :key="index">
  <router-link :to="{name: 'DynamicPage', params: {slug: legal.slug }}" class="hover-text-theme">
  {{ legal.title }}
  </router-link>
</li>

And I user in the languagepage

export default {
name: 'LanguageSwitcher',
components: { CountryFlag, ChevronDownIcon },
data() {
    return {
        language: this.$store.getters.currentLanguage,
        isOpen: false,
    }
},
computed: {
    selected: function () {
        return this.$store.getters.languages.find(language => language.code === this.language);
    },
},

beforeMount() {
    if (! this.selected) {
        this.language = this.$store.getters.languages[0].code;
    }
},
watch: {
    locale() {
        this.$router.replace({ params: { lang: this.language } }).catch(() => {})
    }
},
methods: {
    changeLanguage(language) {
        // Emit selected
        this.$emit('input', language.value)
        // Get selected
        this.language = language.code
        // Close menu
        this.isOpen = false
        this.$store.dispatch('setLanguage', language.code);

        setTimeout(() => location.reload(), 10)
    },
    toggleSwitch() {
        this.isOpen = !this.isOpen
    },
    hideSwitch() {
        this.isOpen = false
    },
},
}

I use these 5 links - Terms of Service | Privacy | Cookie | Policy | About Us

Thank you

You need a way of identifying the language through the url. This could be via a query param (/page/terms-of-service?lang=en) or a route param (/en/page/terms-of-service).

Seeing as you’re concerned with url localisation, the route param option would best.

Hi @Joob
Try to replace watch with beforeRouteUpdate and in that pass next() method. Using the next() method your current navigation will be aborted and a new one will be started.

no doesn.'t work…

I use like this but doesn’t work well
It only enters the PT language if you click on another language, it goes to PT

    if (this.$router.push('/page/' + this.$route.params.slug + '?lang=' + (this.$i18n.locale ? this.$i18n.locale : 'pt'))) {

       this.$router.push('/page/termos-e-servicos')

    }

   if (this.$router.push('/page/' + this.$route.params.slug + '?lang=' + (this.$i18n.locale ? this.$i18n.locale : 'fr'))) {

       this.$router.push('/page/termes-et-services')

  }

  if (this.$router.push('/page/' + this.$route.params.slug + '?lang=' + (this.$i18n.locale ? this.$i18n.locale : 'en'))) {

        this.$router.push('/page/terms-of-services')

  }

  if (this.$router.push('/page/' + this.$route.params.slug + '?lang=' + (this.$i18n.locale ? this.$i18n.locale : 'es'))) {

     this.$router.push('/page/terminos-de-servicios')

 }

I want when if I click on the PT flag (PT language), I want it to go to the page - this.$router.push(’/page/termos-e-servicos’) - but I only want that to happened, when the user is on of those pages (/page/:slug)

ty

Hey @Joob
Try to add the below code to the watch.

this.$router.replace({ params: { lang: this.language } }).catch(() => {})
if(this.language == 'pt'){
       this.$router.push('/page/termos-e-servicos')
}
if(this.language == 'fr'){
       this.$router.push('/page/termes-et-services')
}
if(this.language == 'en'){
       this.$router.push('/page/terms-of-services')
}
if(this.language == 'es'){
       this.$router.push('/page/terminos-de-servicios')
}

I hope this works!!

Thank you dude.

It works in - changeLanguage(language) { - until I put it like this:

       if (this.$i18n.locale === 'pt' && (this.$router.name = '/page/termos-e-servicos') && 
            (this.$router.name = '/page/termes-et-services') &&
            (this.$router.name = '/page/terms-of-service') &&
            (this.$router.name = '/page/terminos-de-servicios')) {

            this.$router.push('/page/termos-e-servicos')
        }
        if (this.$i18n.locale === 'fr' && (this.$router.name = '/page/termos-e-servicos') && 
            (this.$router.name = '/page/termes-et-services') &&
            (this.$router.name = '/page/terms-of-service') &&
            (this.$router.name = '/page/terminos-de-servicios')) {

            this.$router.push('/page/termes-et-services')
        }
        if (this.$i18n.locale === 'en' && (this.$router.name = '/page/termos-e-servicos') && 
            (this.$router.name = '/page/termes-et-services') &&
            (this.$router.name = '/page/terms-of-service') &&
            (this.$router.name = '/page/terminos-de-servicios')) {

            this.$router.push('/page/terms-of-service')
        }
        if (this.$i18n.locale === 'es' && (this.$router.name = '/page/termos-e-servicos') && 
            (this.$router.name = '/page/termes-et-services') &&
            (this.$router.name = '/page/terms-of-service') &&
            (this.$router.name = '/page/terminos-de-servicios')) {
            
            this.$router.push('/page/terminos-de-servicios')
        }

because I want it to make just this one call to the page - this.$router.push(’/page/terms-of-service’) - if I am in one of these links -
(this.$router.name = ‘/page/terms-and-services’) &&
(this.$router.name = ‘/page/terms-et-services’) &&
(this.$router.name = ‘/page/terms-of-service’) &&
(this.$router.name = ‘/page/terms-of-services’) -

get it ?

Because I don’t want to be on the “homepage” and click on language and have it go to those links, I really only want it when I’m on one of those links.

Hey @Joob
Replace && with || and add route in brackets()

if (this.$i18n.locale === 'pt' && ((this.$router.name = '/page/termos-e-servicos') || 
            (this.$router.name = '/page/termes-et-services') ||
            (this.$router.name = '/page/terms-of-service') ||
            (this.$router.name = '/page/terminos-de-servicios'))) {

            this.$router.push('/page/termos-e-servicos')
        }

Do this for all if conditions.

thank you for ur reply.

Still doesn’t work well… bbrr

I click on the flags when I am on the home page, it changes the language, in the URL you can see the link changing to “/page/terms…” and then back to the home page, but sometimes it happens he page “/page/terms…” then when I am on those, I click on the flags and only at the second click on the flag, the page changes.

it’s almost there

Hi @Joob
Let us approach the localization from a different approach. There is a guide on how to do the translation here.

and also check out this package too.

check this on your local machine. If it doesn’t work, I will create a dummy site using code sandbox.

Great dude… thank you for ur time.

I already solved the problem, I made it so that whenever I press the language, and it is on one of the main pages, it refreshes the page to the home page… and on the dashboard it doesn’t move at all, only on the main pages of the basic home page.

Helped me think of a solution.

Thank you dude :slight_smile: