i18n 怎么点击切换语言用vue3代码实现

在 Vue 3 中，我们可以使用 `Vue i18n` 库来实现国际化。下面是一个简单的示例：

1. 安装 `Vue i18n`

npm install vue-i18n

2. 创建国际化实例

在 `main.js` 中创建一个 `Vue i18n` 实例：

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

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

const i18n = createI18n({
  locale: 'en', // 默认的语言
  messages // 消息对象
})

const app = createApp(App)

app.use(i18n)

app.mount('#app')

3. 在组件中使用

在组件中，我们可以使用 `$t` 方法来获取对应的国际化消息。

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="changeLocale">切换语言</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLocale() {
      const currentLocale = this.$i18n.locale
      const newLocale = currentLocale === 'en' ? 'zh' : 'en'
      this.$i18n.locale = newLocale
    }
  }
}
</script>

这里定义了一个按钮，点击按钮会切换语言。我们可以通过修改 `$i18n.locale` 属性来切换语言。在模板中使用 `$t` 方法获取对应的国际化消息。