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

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

HTML

<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
});

const Home={
模板：`
{{$t（'home.title'）}

`
};
常量消息={
嗯:{
主页：{
标题：“你好，世界”，
文本：“单击此链接查找所有帖子！”
}
}
};
常数路由=[
{名称：'home'，路径：'*'，组件：home}
];
常数i18n=新VueI18n({
地区：'en'，
后备语言环境：“en”，
信息：信息
});
常量路由器=新的VueRouter({
模式：“历史”，
路线：路线
});
常量vue=新的vue({
el:“#应用程序”，
路由器:路由器,，
i18n:i18n
});

问题

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

问题

---

是否可以使VueI18n解释

指令中的

v-html

标记？

v-html

将元素的内容替换为，因此替换字符串中使用的自定义元素不会编译为Vue.js组件

您可能需要检查所建议的组件插值方式，这涉及使用

i18n

功能组件和模板字符串

下面是实现此方法的所提供的小提琴的叉子：

简而言之，

i18n

组件具有

path

prop，您可以将模板字符串和定义标记的

tag

prop路径插入其中，

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}'
    }
  }
};

const Home={
模板：`
{{$t（'home.title'）}
{{$t（'home.linkText'）}
`
};
常量消息={
嗯:{
主页：{
标题：“你好，世界”，
linkText:'此链接'，
linkLabel:'通过单击{0}查找所有帖子'
}
}
};

非常有启发性，我也喜欢使用命名插值部件的变体。谢谢！是的，命名格式很棒，特别是当有多个部分时。