头部导航添加中英文切换按钮功能

components/header.vue

@@ -16,6 +16,9 @@
           @keydown.enter="search"
         >
         </b-form-input>
+        <nuxt-link :to="`/?lang=${$store.state.locale === 'en' ? 'zh' : 'en'}`" target="_blank">
+          <img class="ml-3" width="20px" src="~assets//image/icon/language.png" :alt="$t('common.language')" />
+        </nuxt-link>
       </div>
     </header>
 
@@ -37,6 +40,9 @@
             :alt="$t('common.menu')" 
             @click="$refs.menuDrawerRef.drawer=true"
           />
+          <nuxt-link :to="`/?lang=${$store.state.locale === 'en' ? 'zh' : 'en'}`" target="_blank">
+            <img class="ml-3" width="20px" src="~assets//image/icon/language.png" :alt="$t('common.language')" />
+          </nuxt-link>
         </div>
       </div>
 

locales/en.json

@@ -31,7 +31,8 @@
     "next": "Next",
     "prev": "Prev",
     "submitSuccess": "Submit success",
-    "fulltextsearch": "Full text search"
+    "fulltextsearch": "Full text search",
+    "language": "Language"
   },
   "menu": {
     "Home": "Home",

locales/zh.json

@@ -31,7 +31,8 @@
     "next": "下一个",
     "prev": "上一个",
     "submitSuccess": "提交成功",
-    "fulltextsearch": "全站搜索"
+    "fulltextsearch": "全站搜索",
+    "language": "语言"
   },
   "menu": {
     "Home": "首页",

middleware/i18n.js

@@ -4,10 +4,11 @@ export default function ({
   store,
   route,
   query,
+  $cookies,
   error,
   redirect
 }) {
-  const defaultLocale = app.i18n.fallbackLocale
+  const defaultLocale = $cookies.get('lang') || app.i18n.fallbackLocale
   if (isHMR) {
     return
   }
@@ -15,6 +16,7 @@ export default function ({
   if (!store.state.locales.includes(locale)) {
     return error({ message: 'This page could not be found.', statusCode: 404 })
   }
+  
   store.commit('SET_LANG', locale)
   app.i18n.locale = store.state.locale
   

store/index.js

@@ -16,6 +16,7 @@ export const mutations = {
   SET_LANG (state, locale) {
     if (state.locales.includes(locale)) {
       state.locale = locale
+      this.$cookies.set('lang', locale)
     }
   },
   SET_FOOTER_INFO (state, info) {