在 Vue 组件的 <script> 中直接调用 $t() 会报错“ReferenceError: $t is not defined”，因为 $t 是模板上下文中的函数，不可在顶层 JS 作用域直接使用；需通过 useI18n() 获取翻译函数。
在 vue 组件的 `<script>` 中直接调用 `$t()` 会报错“referenceerror: $t is not defined”，因为 `$t` 是模板上下文中的函数，不可在顶层 js 作用域直接使用；需通过 `usei18n()` 获取翻译函数。</script>
在 Vue 3（尤其是使用 Composition API 的单文件组件）中，$t 并非全局变量，而是仅在模板（<template>）和 setup() 函数的响应式上下文中可用。当你尝试在顶层 const navigation = [...] 中直接调用 $t("verkauf")，JavaScript 引擎会在模块初始化阶段执行该代码，此时 useI18n() 尚未被调用、i18n 实例也未注入，因此 $t 根本不存在——导致 ReferenceError。
✅ 正确做法是：在 setup() 或组合式函数内部调用 useI18n()，并利用其返回的 t 函数动态生成翻译后的导航项。以下是推荐实现方式：
<script setup>
import { useI18n } from 'vue-i18n'
import { ref, computed } from 'vue'
// 获取 i18n 工具函数
const { t } = useI18n()
// 定义原始导航结构（键名保持不变，便于维护）
const rawNavigation = [
{ key: 'fullservice', route: '/fullService' },
{ key: 'verkauf', route: '/sale' },
{ key: 'vermietung', route: '/rental' },
{ key: 'streaming', route: '/streaming' },
{ key: 'smarthome', route: '/smartHome' },
{ key: 'kontakt', route: '/contact' },
{ key: 'impressum', route: '/imprint' },
{ key: 'cookieRichtline', route: '/cookiePolicy' }
]
// 动态计算翻译后的导航数组（响应式，语言切换时自动更新）
const navigation = computed(() =>
rawNavigation.map(item => ({
name: t(item.key),
route: item.route
}))
)
</script>
<template>
<div
v-for="item in navigation"
:key="item.route"
class="
text-mst_white text-bold transform transition duration-300
hover:text-mst_orange py-5 px-2
"
>
<router-link :to="item.route">{{ item.name }}</router-link>
</div>
</template>? 关键要点说明：
- ✅ 必须在 setup() 内调用 useI18n()：它依赖当前组件的 appContext，无法在模块顶层使用；
- ✅ 推荐用 computed 包裹导航数组：确保语言切换（如 locale.value = 'de'）时自动重新翻译；
- ✅ 避免硬编码键值对：将 key 与 route 分离设计，提升可读性与可维护性；
- ⚠️ 注意：若使用 Vue I18n v9，请确保已正确安装并全局配置（如 app.use(i18n)），否则 useI18n() 将无法获取实例；
- ⚠️ 不要将 navigation 声明为 ref() 后手动赋值——computed 更简洁且响应式更可靠。
这样既解决了 $t is not defined 错误，又实现了多语言导航的灵活、可维护与响应式更新。
立即学习“前端免费学习笔记（深入）”；
