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

请叫我算术嘉

于 2021-01-21 18:07:11 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/ssjdoudou/article/details/112968752

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;