如何在 nuxt-i18n 文本中包含链接答案

【问题标题】：How to include a link inside nuxt-i18n text如何在 nuxt-i18n 文本中包含链接
【发布时间】：2020-06-05 07:06:38
【问题描述】：

我正在尝试使用 nuxt-I18n 模块进行本地化。我已经安装了"nuxt-i18n": "^6.4.1"

在我的 nuxt.config.js 中，我也有闲置

    modules: [
        [
            'nuxt-i18n',
            {
                defaultLocale: 'en',
                lazy: true,
                langDir: 'locales/',
                locales: [
                    {
                        code: 'mk',
                        name: 'Македонски',
                        file: 'mk.js',
                    },
                    {
                        code: 'en',
                        name: 'English',
                        file: 'en.js',
                    },
                ],
            },
        ],
    ],

我还创建了文件夹 locale，其中有 2 个文件，我在其中编写本地化。我项目中的大部分文本都很简单，所以我在这个设置上做得很好。但是我最终遇到了一个问题。我有一个文本段落，里面有一个链接，如下所示：

<p>Lorem ipsum <a href="#"> This is link </a> dolor sit amet. </p>

我试图用 i18n 的组件来解决这个问题，但我遇到了很多错误。

谁能给我一个如何解决这个问题的例子？

【问题讨论】：

标签： localization vue-component nuxt.js vue-i18n nuxt-i18n

【解决方案1】：

我解决了我的问题，所以如果有人遇到同样的问题，我希望它能够分享。为了更好地理解，你可以阅读关于component interpolation的休闲链接。

    <i18n path="text" tag="p">
        <template v-slot:link>
            <a>{{ $t('link') }}</a>
        </template>
    </i18n

我的语言环境看起来像：

en: {
   text: 'You can check {link} for more details.',
   link: 'component interpolation',

}

【讨论】：