如何使用nuxt-link和i8n导航子页面？

Question

I can obviously call simple pages like so: <nuxt-link :to="localePath('about')"> = http://127.0.0.1:3000/about-us

But calling <nuxt-link :to="localePath('addItem/food')"> return me to root. So does <nuxt-link :to="localePath('food')"> when I'm on the addItem page. ( http://127.0.0.1:3000/ )

If I simply put <nuxt-link :to="localePath('addItem')"> I'm taken to addItem/index, but it's the only thing that work.

How can I properly navigate to addItem/food?

Pages:

pages: {
        'addItem/index': {
          en: '/add-item',
          fr: '/ajout-item',
        },
        'addItem/food': {
          en: '/add-item/food',
          fr: '/ajout-item/alimentation',
        },
        'addItem/pharma': {
          en: '/add-item/pharmaceuticals',
          fr: '/ajout-item/medicaments',
        },
        about: {
          en: '/about-us', // -> accessible at /about-us (no prefix since it's the default locale)
          fr: '/a-propos', // -> accessible at /fr/a-propos
        }
      },

If I input the url directly it works.

How can I get nuxt-link/localePath to properly print the link?

Answer 1

I had the same issue. After some research and a deeper look in the generated router.js inside the ".nuxt" Folder, you can see the generated routes in the function "createRouter()". There you can see, that the name of each route contains the path. But in this case the path is simply linked by a hyphen.

For your example this should work as follows: <nuxt-link :to="localePath('addItem-food')">