Browse Source

fix: 国际化切换动态title

xiaoxian521 4 years ago
parent
commit
8cb2d896ad
4 changed files with 26 additions and 18 deletions
  1. 12 3
      src/layout/components/Navbar.vue
  2. 4 1
      src/router/index.ts
  3. 0 2
      src/settings.ts
  4. 10 12
      src/store/modules/settings.ts

+ 12 - 3
src/layout/components/Navbar.vue

@@ -41,12 +41,12 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, onMounted } from "vue";
+import { ref, defineComponent, onMounted, unref, watch } from "vue";
 import Breadcrumb from "/@/components/BreadCrumb";
 import Hamburger from "/@/components/HamBurger";
 import screenfull from "../components/screenfull/index.vue";
 import { useMapGetters } from "../store";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
 import { storageSession } from "/@/utils/storage";
 import { useI18n } from "vue-i18n";
@@ -68,10 +68,11 @@ export default defineComponent({
 
     const store = useStore();
     const router = useRouter();
+    const route = useRoute();
 
     let usename = storageSession.getItem("info").username;
 
-    const { locale } = useI18n();
+    const { locale, t } = useI18n();
 
     // 国际化语言切换
     const toggleLang = (): void => {
@@ -79,6 +80,14 @@ export default defineComponent({
       langs.value ? (locale.value = "zh") : (locale.value = "en");
     };
 
+    watch(
+      () => langs.value,
+      val => {
+        //@ts-ignore
+        document.title = t(unref(route.meta.title)); // 动态title
+      }
+    );
+
     // 退出登录
     const logout = (): void => {
       storageSession.removeItem("info");

+ 4 - 1
src/router/index.ts

@@ -4,6 +4,8 @@ import Layout from "../layout/index.vue";
 
 import { storageSession } from "../utils/storage";
 
+import { i18n } from "/@/plugins/i18n/index";
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
@@ -349,8 +351,9 @@ const whiteList = ["/login", "/register"];
 
 router.beforeEach((to, _from, next) => {
   NProgress.start();
+  const { t } = i18n.global;
   // @ts-ignore
-  // document.title = $t(to.meta.title); // 动态title
+  document.title = t(to.meta.title); // 动态title
   whiteList.indexOf(to.path) !== -1 || storageSession.getItem("info")
     ? next()
     : next("/login"); // 全部重定向到登录页

+ 0 - 2
src/settings.ts

@@ -3,7 +3,5 @@ export default {
 
   fixedHeader: false,
 
-  sidebarLogo: true,
-
   hiddenSideBar: false,
 };

+ 10 - 12
src/store/modules/settings.ts

@@ -1,29 +1,27 @@
-import defaultSettings from '../../settings'
+import defaultSettings from "../../settings";
 
 const state = {
   title: defaultSettings.title,
   fixedHeader: defaultSettings.fixedHeader,
-  sidebarLogo: defaultSettings.sidebarLogo
-}
+};
 
 const mutations = {
   CHANGE_SETTING: (state: any, { key, value }) => {
     if (state.hasOwnProperty(key)) {
-      state[key] = value
+      state[key] = value;
     }
-  }
-}
+  },
+};
 
 const actions = {
   changeSetting({ commit }, data) {
-    commit('CHANGE_SETTING', data)
-  }
-}
+    commit("CHANGE_SETTING", data);
+  },
+};
 
 export default {
   namespaced: true,
   state,
   mutations,
-  actions
-}
-
+  actions,
+};