中英文切换导航，点击跳出弹框，并可选择四种语言的前端VUE代码

在前端Vue项目中，实现中英文切换导航并支持多种语言通常是通过国际化（i18n）功能来完成的。Vue I18n是一个非常实用的库，可以帮助你在应用中轻松管理多语言资源。以下是实现这一功能的基本步骤：

1. **安装依赖**:
首先，你需要安装`vue-i18n`库，可以使用npm或yarn命令：

   npm install vue-i18n
   # 或者
   yarn add vue-i18n

2. **配置文件**:
创建一个`.js`或`.json`文件，如`messages.json`，用于存储不同语言的翻译数据：

   {
     "en": {
       "nav": {
         "home": "Home",
         "about": "About"
       }
     },
     "zh": {
       "nav": {
         "home": "首页",
         "about": "关于"
       }
     }
     // ...添加其他语言的翻译
   }

3. **在Vue组件中使用**:
在你的组件中引入并设置`vue-i18n`实例，然后根据当前的语言环境动态加载翻译：

   import Vue from 'vue';
   import VueI18n from 'vue-i18n';
   import messages from './messages';

   Vue.use(VueI18n);

   const i18n = new VueI18n({
     locale: 'en', // 当前语言，默认英语
     messages,
     fallbackLng: 'en', // 如果找不到指定语言，则降级到默认语言
   });

   export default {
     computed: {
       translatedNav() {
         return this.$t('nav');
       }
     }
   };

4. **切换语言**:
你可以创建一个按钮或者利用`@click`事件监听用户的选择，更新`locale`属性来改变语言。例如，点击按钮时：

   <button @click="changeLanguage('zh')">简体中文</button>

然后在相应的方法里：

   methods: {
     changeLanguage(language) {
       i18n.locale = language;
     }
   }