使VueI18n对路由器链接标签作出反应

Question

我有这个Vue应用程序，它由一个简单的主页，一个标题，和一个主页文本组成。你可以在我的JSFiddle上在线查看这个应用程序。以下是代码：

<div id="app">
  My header app
  <router-view></router-view>
</div>

JavaScript

const Home = {
    template: `
      <div>
        <h1>{{ $t('home.title') }}</h1>
        <p v-html="$t('home.text')"></p>
      </div>
    `
};

const messages = {
    en: {
    home: {
        title: 'Hello world',
        text: 'Find all post by clicking <router-link to="/post">this link</router-link>!'
    }
  }
};

const routes = [
    { name: 'home', path: '*', component: Home }
];

const i18n = new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages: messages
});

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const vue = new Vue({
    el: '#app',
    router: router,
    i18n: i18n
});

问题

如您所见，没有“路由器-链接”链接可见，单击链接将不会重定向到所需的路由。

问题

是否可以让VueI18n在v-html指令中解释<router-link>标记？

Answer 1

v-html用普通HTML替换元素的内容，因此替换字符串中使用的自定义元素不会编译到Vue.js组件。

您可能需要检查VueI18n文档建议的组件内插方式，这涉及到i18n函数组件和模板字符串的使用。

下面是实现此方法的所提供的小提琴的叉：http://jsfiddle.net/u5vx1mLq/

简而言之，i18n组件有path支柱，您可以在其中路径模板字符串和定义标记的tag支柱，i18n组件将被替换为。i18n还有一个插槽，它可以用于定义子组件，您可以在其子组件中插值模板字符串的部分。

对于这个尴尬的解释，很抱歉，希望代码片段能为这件事提供一些线索：

const Home = {
  template: `
    <div>
      <h1>{{ $t('home.title') }}</h1>
      <i18n path="home.linkLabel" tag="label" for="home.linkText">
        <router-link to="/post">{{ $t('home.linkText') }}</router-link>
      </i18n>
    </div>
  `
};

const messages = {
  en: {
    home: {
      title: 'Hello world',
      linkText: 'this link',
      linkLabel: 'Find all post by clicking {0}'
    }
  }
};

Answer 2

自从安东库给出了很好的答案后，一些事情发生了变化

https://vue-i18n.intlify.dev/guide/advanced/component.html

像这样的标签

<i18n-t keypath="mymessage">xxx</i18n-t>

将输出mymessage和xxx的转换作为该消息的参数。

const messages = {
  en: {
    mymessage: 'here are some characters: {0}'
  }
};

更详细的是，此标记以两个链接作为输入，并在small标记中呈现输出。

<i18n-t keypath="twolinks" tag="small">
   <template v-slot:link1>
     <a href="//link1.nl/" target="_blank">here</a>
   </template>
   <template v-slot:link2>
     <router-link :to="{ name: 'login' }">here</router-link>
   </template>
</i18n-t>

const messages = {
  en: {
    twolinks: 'I want you to click {link1} and then {link2}'
  }
};