fix: 国际化切换动态title

This commit is contained in:
xiaoxian521 2021-04-28 15:07:24 +08:00
parent 2d5a82ddc0
commit 8cb2d896ad
4 changed files with 26 additions and 18 deletions

View File

@ -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");

View File

@ -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"); // 全部重定向到登录页

View File

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

View File

@ -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,
};