vue-i18n:依赖于语言的视图
vue-i18n: language dependent view
我在我的应用程序中使用 vue-i18n。
现在我想添加一个包含大量文本和链接的“关于”视图。
我认为拥有多个依赖于语言的视图比在一个视图中添加多个 {{ $t(...)}}
更易于维护 about.vue
。
我考虑过将语言 ISO 代码添加到视图名称中:
- .../about.en.vue
- .../about.de.vue
- .../about.es.vue
与 vue-i18n 结合和集成的最佳方式是什么?可能有不同的方法?
您可以使用动态组件来实现:
<template>
<component :is="localizedAbout" />
</template>
<script>
import AboutEn from '../about.en.vue';
import AboutEs from '../about.es.vue';
import AboutDe from '../about.de.vue';
export default {
components: {
AboutEn,
AboutEs,
AboutDe,
},
computed: {
localizedAbout() {
switch (this.$i18n.locale) {
case 'en':
return AboutEn;
case 'es':
return AboutEs;
case 'de':
return AboutDe;
default:
return '';
}
},
},
}
</script>
在做了一些其他事情后,我今天能够通过使用动态导入解决这个问题:
<template>
<b-container class="about">
<component :is="langComponent" />
</b-container>
</template>
<script>
export default {
name: 'AboutView',
data () {
return {
langComponent: null
}
},
mounted () {
this.$watch(
'$i18n.locale',
(newLocale, oldLocale) => {
if (newLocale === oldLocale) {
return
}
this.setLangAbout()
},
{
immediate: true
}
)
},
methods: {
setLangAbout () {
try {
import('@/components/about/About.' + this.$i18n.locale + '.vue').then(module => {
this.langComponent = module.default
})
} catch (err) {
console.log(err)
import('@/components/about/About.en.vue').then(module => {
this.langComponent = module.default
})
}
}
}
}
</script>
感谢@Pochwar 的初步回答。基于此,我做了一些更多的研究。
以下链接帮助我解决了这个问题:
- How does Dynamic Import in webpack works when used with an expression?
- 评论 错误:找不到具有动态导入的模块
我在我的应用程序中使用 vue-i18n。 现在我想添加一个包含大量文本和链接的“关于”视图。
我认为拥有多个依赖于语言的视图比在一个视图中添加多个 {{ $t(...)}}
更易于维护 about.vue
。
我考虑过将语言 ISO 代码添加到视图名称中:
- .../about.en.vue
- .../about.de.vue
- .../about.es.vue
与 vue-i18n 结合和集成的最佳方式是什么?可能有不同的方法?
您可以使用动态组件来实现:
<template>
<component :is="localizedAbout" />
</template>
<script>
import AboutEn from '../about.en.vue';
import AboutEs from '../about.es.vue';
import AboutDe from '../about.de.vue';
export default {
components: {
AboutEn,
AboutEs,
AboutDe,
},
computed: {
localizedAbout() {
switch (this.$i18n.locale) {
case 'en':
return AboutEn;
case 'es':
return AboutEs;
case 'de':
return AboutDe;
default:
return '';
}
},
},
}
</script>
在做了一些其他事情后,我今天能够通过使用动态导入解决这个问题:
<template>
<b-container class="about">
<component :is="langComponent" />
</b-container>
</template>
<script>
export default {
name: 'AboutView',
data () {
return {
langComponent: null
}
},
mounted () {
this.$watch(
'$i18n.locale',
(newLocale, oldLocale) => {
if (newLocale === oldLocale) {
return
}
this.setLangAbout()
},
{
immediate: true
}
)
},
methods: {
setLangAbout () {
try {
import('@/components/about/About.' + this.$i18n.locale + '.vue').then(module => {
this.langComponent = module.default
})
} catch (err) {
console.log(err)
import('@/components/about/About.en.vue').then(module => {
this.langComponent = module.default
})
}
}
}
}
</script>
感谢@Pochwar 的初步回答。基于此,我做了一些更多的研究。 以下链接帮助我解决了这个问题:
- How does Dynamic Import in webpack works when used with an expression?
- 评论 错误:找不到具有动态导入的模块