vue组件中的国际化i18n在js中使用时未生效的处理

最新推荐文章于 2025-06-16 17:00:18 发布

芋头CF

最新推荐文章于 2025-06-16 17:00:18 发布

阅读量8.1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue i18n 国际化 js

本文链接：https://blog.youkuaiyun.com/markinstephen/article/details/83621453

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了在Vue项目中使用i18n组件进行国际化时的常见误区与正确实践。作者指出，在template中直接使用{{$t()}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自我的简书：https://www.jianshu.com/p/9e018002976e

在国际化i18n组件使用中，我们之前的用法有点错误，我总结一下哈：
在vue组件的中使用

<template>
    <div>
        <div class="page-header-title">{{$t("m.RegisterTitle[1]")}}</div>
    </div>
</template>

在template中可以直接这样用{{$t(“m.RegisterTitle[1]”)}}，没有问题，切换语言的时候，能够正常切换；
但是在JavaScript里面，这样用

data() {
    return {
        title: this.$t("m.RegisterTitle[2]"),
        tips: this.$t("m.ResetPasswordTips"),
        items: this.$t("m.InputItem"),
        next: this.$t("m.RouterTitle[2]"),
        close: this.$t("m.UpperIcon[0]"),
    }
}

就不行了，切换语言的时候，这里的内容不能够正常切换
需要使用

computed: {
        title: function () {
            return this.$t("m.RegisterTitle[2]");
        },
        tips: function () {
            return this.$t("m.ResetPasswordTips");
        },
        items: function () {
            return this.$t("m.InputItem");
        },
        next: function () {
            return this.$t("m.RouterTitle[2]");
        },
        close: function () {
            return this.$t("m.UpperIcon[0]");
        }
    }

computed 就像高级语言中的属性，有getter/setter方法，data 就像变量
以上仅个人愚见，如有错误地方，欢迎指正，谢谢