diff --git a/src/router/permission.ts b/src/router/permission.ts index 8d0d1457..22c9ad63 100644 --- a/src/router/permission.ts +++ b/src/router/permission.ts @@ -3,6 +3,7 @@ import { useUserStoreHook } from "@/store/modules/user" import { usePermissionStoreHook } from "@/store/modules/permission" import { ElMessage } from "element-plus" import { getToken } from "@/utils/cache/cookies" +import { fixBlankPage } from "@/utils/fix-blank-page" import routeSettings from "@/config/route" import isWhiteList from "@/config/white-list" import NProgress from "nprogress" @@ -11,6 +12,7 @@ import "nprogress/nprogress.css" NProgress.configure({ showSpinner: false }) router.beforeEach(async (to, _from, next) => { + fixBlankPage() NProgress.start() const userStore = useUserStoreHook() const permissionStore = usePermissionStoreHook() diff --git a/src/store/modules/tags-view.ts b/src/store/modules/tags-view.ts index 51194de8..63aa7cba 100644 --- a/src/store/modules/tags-view.ts +++ b/src/store/modules/tags-view.ts @@ -1,4 +1,5 @@ import { ref, watchEffect } from "vue" +import store from "@/store" import { defineStore } from "pinia" import { useSettingsStore } from "./settings" import { type RouteLocationNormalized } from "vue-router" @@ -93,3 +94,8 @@ export const useTagsViewStore = defineStore("tags-view", () => { delAllCachedViews } }) + +/** 在 setup 外使用 */ +export function useTagsViewStoreHook() { + return useTagsViewStore(store) +} diff --git a/src/utils/fix-blank-page.ts b/src/utils/fix-blank-page.ts new file mode 100644 index 00000000..de34bb1e --- /dev/null +++ b/src/utils/fix-blank-page.ts @@ -0,0 +1,15 @@ +import { useTagsViewStoreHook } from "@/store/modules/tags-view" + +/** + * 功能:修复 组合使用导致的页面空白 + * 原因:似乎是 Vue 本身的 BUG:https://github.com/vuejs/core/issues/7121 + * 复现:在不使用该函数,可以通过如下步骤复现: + * 1. 进入一个页面 + * 2. 修改该页面的 TS 代码并保存 + * 3. 回到浏览器切换一下页面 + * 4. 结果:内容区没有加载出来呈现空白状态 + */ +export const fixBlankPage = () => { + const tagsViewStore = useTagsViewStoreHook() + tagsViewStore.cachedViews = [...tagsViewStore.cachedViews] +}