在 Vue 组件的 中直接调用 $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 并非全局变量，而是仅在模板（

✅ 正确做法是：在 setup() 或组合式函数内部调用 useI18n()，并利用其返回的 t 函数动态生成翻译后的导航项。以下是推荐实现方式：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

<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 错误，又实现了多语言导航的灵活、可维护与响应式更新。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！