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

时间:2018-08-30 02:39:51

标签: javascript nuxt.js

我显然可以像这样调用简单的页面: <nuxt-link :to="localePath('about')"> = http://127.0.0.1:3000/about-us

但是打电话给<nuxt-link :to="localePath('addItem/food')">使我回到了root。当我在addItem页面上时,<nuxt-link :to="localePath('food')">也是如此。 (http://127.0.0.1:3000/

如果我只是简单地输入<nuxt-link :to="localePath('addItem')">,我就会被添加到addItem / index中,但这是唯一有效的方法。

如何正确导航到addItem / food?

页面:

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
        }
      },

如果我直接输入网址,它将起作用。

如何获取nuxt-link / localePath以正确打印链接?

1 个答案:

答案 0 :(得分:0)

我有同样的问题。经过研究并更深入地了解了“ .nuxt”文件夹中生成的router.js,您可以在函数“ createRouter()”中看到生成的路由。在那里,您可以看到每个路由的名称都包含路径。但是在这种情况下,路径只是由连字符链接。

对于您的示例,这应如下所示: <nuxt-link :to="localePath('addItem-food')">