Vue I18n 如何判断某个 key 是否存在

在 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>
                        <div class="description">
                            <!-- page.desc 不存在，此处渲染的是 nav.desc 的值 -->
                            {{ 
                                $te(`home.page.desc`) ? 
                                $t(`home.page.desc`) : $t(`home.nav.desc`) 
                            }}
                        </div>
                    </template>
                

最终渲染的 html：

                    <div class="title">
                        阳光知道 - 关注各类编程开发技术
                    </div>
                    <div class="description">
                        阳光知道是一个关注各类编程开发技术的网站
                    </div>
                

更多

关于 $te 的更多用法请查看 https://kazupon.github.io/vue-i18n/zh/api/#te