在 Vue I18n 中我们可以使用
$te(key)
这个函数来检查某个 key 是否存在。
我们
不能使用
$t(key)
来判断 key 是否存在,因为就算 key 不存在,
$t(key)
依然会返回一个字符串。
案例:
例如我们有个 vue-i18n 多语言 json 文件配置格式如下:
"home":{
"page": {
"title": "阳光知道 - 关注各类编程开发技术",
"nav": {
"title": "阳光知道 - 首页",
"desc": "阳光知道是一个关注各类编程开发技术的网站"
vue
当
page
下的
title
与
desc
存在则取它们的值,否则取
nav
下的
title
与
desc
<template>
<div class="title">
<!-- page.title 存在,此处渲染的是 page.title 的值 -->
$te(`home.page.title`) ?
$t(`home.page.title`) : $t(`home.nav.title`)
<div class="description">
<!-- page.desc 不存在,此处渲染的是 nav.desc 的值 -->
$te(`home.page.desc`) ?
$t(`home.page.desc`) : $t(`home.nav.desc`)
</template>
最终渲染的 html:
<div class="title">