vue 后台翻译_vue与vue-i18n结合实现后台数据的多语言切换方法 有没有代码可以实现

是的，可以使用Vue和vue-i18n结合实现后台数据的多语言切换。以下是一个简单的示例代码：

1. 安装vue-i18n

npm install vue-i18n --save

2. 创建i18n配置文件

在项目中创建一个`i18n.js`文件，用于定义i18n的配置。示例代码如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    hello: 'Hello',
    world: 'World'
  },
  zh: {
    hello: '你好',
    world: '世界'
  }
}

const i18n = new VueI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 如果当前语言不存在，则回退到的语言
  messages
})

export default i18n

在上面的代码中，我们定义了两种语言：英语和中文。其中，`locale`表示默认语言，`fallbackLocale`表示如果当前语言不存在，则回退到的语言。`messages`是一个对象，其中包含了不同语言的翻译。

3. 在Vue组件中使用i18n

在需要使用i18n的Vue组件中，可以通过`$t`方法来获取当前语言的翻译。示例代码如下：

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('world') }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

在上面的代码中，我们使用了`$t`方法来获取当前语言的翻译。注意，`$t`方法的参数是一个字符串，用于指定需要翻译的内容。在上面的示例中，我们分别翻译了“Hello”和“World”。

4. 切换语言

最后，我们需要为用户提供切换语言的功能。可以在Vue组件中添加一个切换语言的按钮，并在点击事件中切换当前的语言。示例代码如下：

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('world') }}</p>
    <button @click="changeLang('en')">English</button>
    <button @click="changeLang('zh')">中文</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    changeLang(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

在上面的代码中，我们为用户提供了两个按钮，用于切换语言。在点击事件中，我们通过`this.$i18n.locale`来切换当前的语言。

以上就是一个简单的Vue和vue-i18n结合实现后台数据的多语言切换的示例代码。