Vue.js结合Element-UI实现标题动态赋值以及国际化

原创于 2021-01-21 18:07:11 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

28 篇文章

订阅专栏

本文介绍了如何在前端项目中实现国际化动态标题赋值，通过监听语言变化和请求数据后动态更新页面标题。示例代码展示了使用$watch监听i18n.locale的变化，并在请求完成后根据响应数据设置标题的方法。

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

添加标题

<template>
  <el-container>
    <title>{{$t('common.category')}}</title>
  </el-container>
</template>

首先监听语言改变

watch: {
    '$i18n.locale' (newVal, oldVal) {
        document.title = this.$t('common.category')
    }
},

<template>
  <el-container>
    <title></title>
  </el-container>
</template>

然后每次请求完数据后直接赋值（这里的数据自己调整）

document.title = res['list'][0].fields.title;