I'm using vue-router in my vue.js project and I'm also using vue-i18n for internationalization in fr and en. Everything work fine, but i need to translate the URL and I don't find anything. Did someone have already done something like this?

Example: /en/home -> /fr/accueil /en/about -> /fr/a-propos

I'm using vue-router in my vue.js project and I'm also using vue-i18n for internationalization in fr and en. Everything work fine, but i need to translate the URL and I don't find anything. Did someone have already done something like this?

Example: /en/home -> /fr/accueil /en/about -> /fr/a-propos

• javascript
• vue.js
• vue-router
• vue-i18n

Share Improve this question Follow asked Aug 6, 2018 at 14:33 nayan perronnayan perron 8511 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here is an example

window._ = require('lodash');

import Vue from 'vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Vuex from 'vuex'
Vue.use(Vuex);

const store = new Vuex.Store({
    state: {}
})

import vuexI18n from 'vuex-i18n'
Vue.use(vuexI18n.plugin, store)

const i18n = Vue.i18n

import translationsEn from './locales/en.json'
import translationsHr from './locales/hr.json'

i18n.add('en', translationsEn)
i18n.add('hr', translationsHr)
i18n.set('en')
i18n.fallback('en')

// Core
import App from './ponents/App.vue'
import Navbar from './ponents/Navbar.vue'
import MainFooter from './ponents/Footer.vue'
// Pages
import Page from './ponents/views/Page.vue'
import HomePage from './ponents/views/Home.vue'
import AboutPage from './ponents/views/About.vue'
import ContactPage from './ponents/views/Contact.vue'
import NotFoundPage from './ponents/views/NotFound.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        ponent: HomePage,
        alias: '/:locale'
    },
    /**
     * UNTRANSLATED ROUTES
     * 
     * This will always set route path according to default locale
     * and it will be the same for every localized route.
     * 
     * This is goto approach if you don't need translated route names
     * 
     * Example: /en/about, /hr/about, /es/about, ...
     */
    // {
    //     path: '/:locale/' + i18n.translate('routes.about'),
    //     name: 'about',
    //     ponent: AboutPage
    // },
    // {
    //     path: '/:locale/' + i18n.translate('routes.contact'),
    //     name: 'about',
    //     ponent: ContactPage
    // },

    /**
     * TRANSLATED ROUTES
     * 
     * This is little bit of an experimental hack solution,
     * and it is simple for smaller amount of routes.
     * 
     * Required to do:
     * - set path for every language (en, hr)
     * - create dummy ponent which will contain view-router element (Page.vue)
     * - set children with translated path names
     * - set name in format {locale.routeName}
     * 
     * This can be done with the foreach loop to simplify the setup code
     * 
     * Example: /en/about, /hr/o-nama, /es/acerca-de, ...
     */
    {
        path: '/en',
        ponent: Page,
        children: [
            {
                path: i18n.translateIn('en', 'routes.about'),
                name: 'en.about',
                ponent: AboutPage
            },
            {
                path: i18n.translateIn('en', 'routes.contact'),
                name: 'en.contact',
                ponent: ContactPage
            }
        ]
    },
    {
        path: '/hr',
        ponent: Page,
        children: [
            {
                path: i18n.translateIn('hr', 'routes.about'),
                name: 'hr.about',
                ponent: AboutPage
            },
            {
                path: i18n.translateIn('hr', 'routes.contact'),
                name: 'hr.contact',
                ponent: ContactPage
            }
        ]
    },
    {
        path: '/:locale/*',
        name: 'not-found',
        ponent: NotFoundPage
    }
]

const router = new VueRouter({
    routes,
    scrollBehavior (to, from, savedPosition) {
        //
    },
    mode: 'history'
})

window.router = router

/**
 * Fetch correct route based on language and route name
 */
router.beforeEach((to, from, next) => {
    let locale = '',
        localeUrlSegment = to.path.split('/'),
        currentLocale = i18n.locale()

    // Get locale from path
    localeUrlSegment.shift()
    locale = localeUrlSegment[0]

    // Locale fallback
    if (locale === '') locale = currentLocale

    // Set locale
    i18n.set(locale)
    to.params.locale = locale

    // Move on the next hook (render ponent view)
    next()
})

const app = new Vue({
    el: '#app',
    ponents: {
        App,
        Navbar,
        MainFooter
    },
    data: {},
    puted: {},
    methods: {},
    router
});

For reference, the original link is https://github./kikky7/vue-localized-routes-example/blob/master/assets/js/app.js