some params is missing when use localePath

[azeranex]

My reload params is missing to nuxt-link like this <nuxt-link :to="localePath({ name: 'foo', params: { foo: 'nice', reload: true } })"> this.$router.push(localePath({ name: 'foo', params: { foo: 'nice', reload: true } }))

It's working fine below. No params are lost. <nuxt-link :to="{ name: 'foo', params: { foo: 'nice', reload: true } }"> this.$router.push({ name: 'foo', params: { foo: 'nice', reload: true } })

_{This question is available on Nuxt.js community (#c27)}

[paulgv]

Hi @Azeranex Could you share your pages directory structure as well as the content of .nuxt/router.js please? Might help to find out what's going on there :)

[azeranex]

Here it is. Directory structure

/pages
 |--/_list.vue
 |--/view/_id.vue

router.js

export function createRouter () {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'is-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,
    routes: [
        {
            path: "/en/view/:id?",
            component: _81e2ec36,
            name: "view-id-en"
        },
        {
            path: "/view/:id?",
            component: _81e2ec36,
            name: "view-id-th"
        },
        {
        {
            path: "/en/:list",
            component: _37bcb236,
            name: "list-en"
        },
        {
            path: "/:list",
            component: _37bcb236,
            name: "list-th"
        }
    ],

    fallback: false
  })
}

[paulgv]

The params key is used to replace dynamic URL fragments like :id or :list. If your route doesn't contain a :reload fragment, passing reload in the params won't do anything. However, you could pass reload via the query string:

<nuxt-link :to="localePath({
  name: 'foo',
  params: { foo: 'nice' },
  query: { reload: true }
})">

But I might be missing the point because the code in your comment does not seem to reflect your original question (no route named foo and no :foo param), so if my answer doesn't help, can you please provide a sample project where I can reproduce the issue?

[azeranex]

I use reload param to check whether I need to fetch api data and fill vuex store or not. You can use query to track too but when you use ajax to fill more data (e.g. infinite scroll) your page will be reload to first data if you view item on other page and click back. You ajax content got wiped. Your scroll position lost.

If you store reload var in param you data still intact.

I can solve my problem by using (it's work fine) <nuxt-link :to="{ name: `listing-${$i18n.locale}`, params: { listing: 'rent', reload: true } }" class="navbar-item">{{ $t('navbar.rent') }}</nuxt-link>

[ghost]

This question has been resolved by @Azeranex, see answer.

[urbgimtam]

I use a similar strategy to link to a child url (for SEO purposes), but also passing an id that I use to fetch data from.

Without i18n, you can do <nuxt-link :to="{name: 'thepage-url', params: {id: '123', url: 'abced' }"} /> which will give you access to both parameters in $routes.params object on the child page.

However, with i18n, when you write: <nuxt-link :to="localePath({ name: 'thepage-url', params: {id: '123', url: 'abced'} }) you only access the parameter used for the 'slug' definition (this case, 'url').

Have to use the alternative presented by @azeranex to make it work (thanks!), but feels like a hack. Edit: here's what I use for Nuxt 2.4.0 and above:

<nuxt-link
    :to="{
            name: `thepage-url___${$i18n.locale}`,
            params: {
              url: 'abced',
              nid: '123',
              fulldata: anObjWithData   // you can also pass an object with a good bunch of data, if needed.
            }
         }" />

IMO localePath() should deal only with the 'name', like <nuxt-link :to="{ name: localePath('thepage-url'), params: { [ all we need here ]} }) />

What's the benefit of passing the full params object into the function localePath?

[EnzoBatista]

@azeranex @urbgimtam <nuxt-link :to="{ name: localePath('thepage-url'), params: { [ all we need here ]} }) />

Really work???

[eduplessis]

@urbgimtam @azeranex @EnzoBatista After trying all of your way to do it... that was ok but feel a little bit hacky like you say i've find the correct way to do it

ex: directory sctructure:

  |-- team/index.vue
  |--team/_slug.vue

routes.json:

    "name": "team-slug___en",
    "path": "/en/team/:slug",
    "component": "/src/pages/team/_slug.vue",
    "chunkName": "pages/team/_slug",
    "_name": "_d249e642"
  },

<nuxt-link :to="localePath({ name: `team-slug`, params: { slug: member.slug } })" v-for="(member, index) in team"
 :key="index">