Static GitHub Issues

[1595] Named Routes

prev: NuxtServerError "value" required in setHeader("cookie", value)
next: Mismatching childNodes vs. VNodes

For my i18n I want to change dynamically the path name of my route, but have the same component associated to it. For instance:

pages about-us.vue

// overwrite or extend the routes automatically generated by nuxt
import paths from 'paths'

const lang = $store.lang
const aboutUsPath = paths[lang].about

const router = new VueRouter({
  routes: [
    {
      path: aboutUsPath, // it changes according to the country code
      name: 'about-us',
      component: AboutUs
    }
  ]
})

and then I use nuxt linkto as follow:

<nuxt-link :to="{ name: 'about-us' }> {{ content.navigation.about }} </nuxt-link>

With the current implementation I have to create under pages many files: pages about-us.vue chi-siamo.vue quienes-somos.vue qui-sommes-nous.vue

and then in each of them import the same component, where I load dynamically the localised content. Not very elegant solution.

How can I access nuxt routes and customize them as I want?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1424">#c1424</a>)</em></sub></div>