0

I have my routes as define below:

const router = new Router({
  base: '/',
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: `${DEFAULT_LOCALE}`,
    },
    {
      path: '/:locale?',
      component: AppTemplate,
      children: [
        {
          path: 'home',
          name: 'home',
          component: () => import('@/views/Home.vue'),
          meta: {
            title: 'Home',
          }
        }
        {
          path: 'about',
          name: 'about',
          component: () => import('@/views/About.vue'),
          meta: {
            title: 'About',
          },
        },
        {
          path: 'contact',
          name: 'contact',
          component: () => import('@/views/Contact.vue'),
          meta: {
            title: 'Contact',
          },
        },
        {
          path: '*',
          redirect: { path: '/' },
        },
      ],
    },
    {
      path: '*',
      redirect: { path: '/' },
    },
  ],
});
export default router;

I use :locale for app translation. It is optional because empty locale is for default language. My problem here is even if locale is present, all the links to other pages are without the locale, if that makes sense. For eg, example.com/about is in Italian and example.com/en/about is in English. But which ever URL it is, the links present on the page always points to contact or home page as example.com/contact and example.com/home. Is there a way to fix this? Or is there an easier way to use app translation from URL. I am using vue-i18n for the translation. Thanks

sven
  • 303
  • 1
  • 2
  • 8

1 Answers1

0

For such configuration I think you have to pass param to make it work:

<router-link :to="{name: 'contact', params: {locale: $route.params.locale} }">

https://jsfiddle.net/3gx4hak5/

Also maybe router-link append attribute will do the trick for you: https://router.vuejs.org/api/#append

Setting append prop always appends the relative path to the current path. For example, assuming we are navigating from /a to a relative link b, without append we will end up at /b, but with append we will end up at /a/b.

<router-link :to="{ path: 'relative/path'}" append></router-link>
Maksim Nesterenko
  • 5,661
  • 11
  • 57
  • 91
  • I am using the second one: ``. This works when the dynamic route `:locale` is required. When its optional, and even when the url is `localhost:8080/en/about`, the links are `localhost:8080/contact`. – sven Jul 19 '18 at 08:36