vue3多语言配置侧边栏语言

Vue3 多语言配置侧边栏语言的步骤如下：

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 i18n = createI18n({
     locale: 'zh-CN', // 默认语言
     messages: {
       'zh-CN': {
         sidebar: {
           home: '首页',
           about: '关于我们',
           contact: '联系我们'
         }
       },
       'en-US': {
         sidebar: {
           home: 'Home',
           about: 'About Us',
           contact: 'Contact Us'
         }
       }
     }
   })

   const app = createApp(App)
   app.use(i18n)
   app.mount('#app')

3. 在侧边栏组件中使用 `$t` 方法获取对应语言的文本

   <template>
     <div>
       <ul>
         <li>{{ $t('sidebar.home') }}</li>
         <li>{{ $t('sidebar.about') }}</li>
         <li>{{ $t('sidebar.contact') }}</li>
       </ul>
     </div>
   </template>

4. 切换语言

可以通过在 Vue 根实例上设置 `locale` 属性来切换语言。

   // 在组件中
   this.$i18n.locale = 'en-US'

   // 在 Vue 根实例中
   const i18n = createI18n({
     locale: 'zh-CN',
     messages: { ... }
   })

   i18n.locale = 'en-US'

以上就是 Vue3 多语言配置侧边栏语言的步骤。