{
+router.beforeEach((to: ToRouteType, _from, next) => {
if (to.meta?.keepAlive) {
handleAliveRoute(to, "add");
// 页面整体刷新和点击标签页刷新
@@ -174,7 +174,8 @@ router.beforeEach((to: toRouteType, _from, next) => {
}
}
}
- router.push(to.fullPath);
+ // 确保动态路由完全加入路由列表并且不影响静态路由（注意：动态路由刷新时router.beforeEach可能会触发两次，第一次触发动态路由还未完全添加，第二次动态路由才完全添加到路由列表，如果需要在router.beforeEach做一些判断可以在to.name存在的条件下去判断，这样就只会触发一次）
+ if (isAllEmpty(to.name)) router.push(to.fullPath);
});
}
toCorrectRoute();
diff --git a/src/router/utils.ts b/src/router/utils.ts
index 98c98f5..2436e2b 100644
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -256,7 +256,7 @@ function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
}
/** 处理缓存路由（添加、删除、刷新） */
-function handleAliveRoute({ name }: toRouteType, mode?: string) {
+function handleAliveRoute({ name }: ToRouteType, mode?: string) {
switch (mode) {
case "add":
usePermissionStoreHook().cacheOperate({
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index e357c90..33fd0dd 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -2,8 +2,8 @@ import { defineStore } from "pinia";
import { store } from "@/store";
import { cacheType } from "./types";
import { constantMenus } from "@/router";
-import { getKeyList } from "@pureadmin/utils";
import { useMultiTagsStoreHook } from "./multiTags";
+import { debounce, getKeyList } from "@pureadmin/utils";
import { ascending, filterTree, filterNoPermissionTree } from "@/router/utils";
export const usePermissionStore = defineStore({
@@ -37,7 +37,7 @@ export const usePermissionStore = defineStore({
break;
}
/** 监听缓存页面是否存在于标签页，不存在则删除 */
- (() => {
+ debounce(() => {
let cacheLength = this.cachePageList.length;
const nameList = getKeyList(useMultiTagsStoreHook().multiTags, "name");
while (cacheLength > 0) {
diff --git a/src/store/modules/types.ts b/src/store/modules/types.ts
index c681b81..4d29690 100644
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -23,7 +23,6 @@ export type appType = {
export type multiType = {
path: string;
- parentPath: string;
name: string;
meta: any;
query?: object;
diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts
index 0022e8d..63816f1 100644
--- a/src/utils/mitt.ts
+++ b/src/utils/mitt.ts
@@ -1,21 +1,13 @@
import type { Emitter } from "mitt";
import mitt from "mitt";
+/** 全局公共事件需要在此处添加类型 */
type Events = {
- resize: {
- detail: {
- width: number;
- height: number;
- };
- };
openPanel: string;
tagViewsChange: string;
tagViewsShowModel: string;
logoChange: boolean;
- changLayoutRoute: {
- indexPath: string;
- parentPath: string;
- };
+ changLayoutRoute: string;
};
export const emitter: Emitter
= mitt();
diff --git a/types/global.d.ts b/types/global.d.ts
index ae7bc4a..3f17d2d 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -7,7 +7,6 @@ import type {
import type { ECharts } from "echarts";
import type { IconifyIcon } from "@iconify/vue";
import type { TableColumns } from "@pureadmin/table";
-import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
/**
* 全局类型声明，无需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可获得类型提示
@@ -150,98 +149,6 @@ declare global {
tags?: Array;
}
- /**
- * `src/router` 文件夹里的类型声明
- */
- interface toRouteType extends RouteLocationNormalized {
- meta: {
- roles: Array;
- keepAlive?: boolean;
- dynamicLevel?: string;
- };
- }
-
- /**
- * @description 完整子路由配置表
- */
- interface RouteChildrenConfigsTable {
- /** 子路由地址 `必填` */
- path: string;
- /** 路由名字（对应不要重复，和当前组件的`name`保持一致）`必填` */
- name?: string;
- /** 路由重定向 `可选` */
- redirect?: string;
- /** 按需加载组件 `可选` */
- component?: RouteComponent;
- meta?: {
- /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */
- title: string;
- /** 菜单图标 `可选` */
- icon?: string | FunctionalComponent | IconifyIcon;
- /** 菜单名称右侧的额外图标 */
- extraIcon?: string | FunctionalComponent | IconifyIcon;
- /** 是否在菜单中显示（默认`true`）`可选` */
- showLink?: boolean;
- /** 是否显示父级菜单 `可选` */
- showParent?: boolean;
- /** 页面级别权限设置 `可选` */
- roles?: Array;
- /** 按钮级别权限设置 `可选` */
- auths?: Array;
- /** 路由组件缓存（开启 `true`、关闭 `false`）`可选` */
- keepAlive?: boolean;
- /** 内嵌的`iframe`链接 `可选` */
- frameSrc?: string;
- /** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
- frameLoading?: boolean;
- /** 页面加载动画（有两种形式，一种直接采用vue内置的`transitions`动画，另一种是使用`animate.css`写进、离场动画）`可选` */
- transition?: {
- /**
- * @description 当前路由动画效果
- * @see {@link https://next.router.vuejs.org/guide/advanced/transitions.html#transitions}
- * @see animate.css {@link https://animate.style}
- */
- name?: string;
- /** 进场动画 */
- enterTransition?: string;
- /** 离场动画 */
- leaveTransition?: string;
- };
- // 是否不添加信息到标签页，（默认`false`）
- hiddenTag?: boolean;
- /** 动态路由可打开的最大数量 `可选` */
- dynamicLevel?: number;
- };
- /** 子路由配置项 */
- children?: Array;
- }
-
- /**
- * @description 整体路由配置表（包括完整子路由）
- */
- interface RouteConfigsTable {
- /** 路由地址 `必填` */
- path: string;
- /** 路由名字（保持唯一）`可选` */
- name?: string;
- /** `Layout`组件 `可选` */
- component?: RouteComponent;
- /** 路由重定向 `可选` */
- redirect?: string;
- meta?: {
- /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */
- title: string;
- /** 菜单图标 `可选` */
- icon?: string | FunctionalComponent | IconifyIcon;
- /** 是否在菜单中显示（默认`true`）`可选` */
- showLink?: boolean;
- /** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */
- rank?: number;
- };
- /** 子路由配置项 */
- children?: Array;
- }
-
/**
* 平台里所有组件实例都能访问到的全局属性对象的类型声明
*/
diff --git a/types/router.d.ts b/types/router.d.ts
new file mode 100644
index 0000000..6f6880a
--- /dev/null
+++ b/types/router.d.ts
@@ -0,0 +1,105 @@
+// 全局路由类型声明
+
+import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
+
+declare global {
+ interface ToRouteType extends RouteLocationNormalized {
+ meta: CustomizeRouteMeta;
+ }
+
+ /**
+ * @description 完整子路由的`meta`配置表
+ */
+ interface CustomizeRouteMeta {
+ /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */
+ title: string;
+ /** 菜单图标 `可选` */
+ icon?: string | FunctionalComponent | IconifyIcon;
+ /** 菜单名称右侧的额外图标 */
+ extraIcon?: string | FunctionalComponent | IconifyIcon;
+ /** 是否在菜单中显示（默认`true`）`可选` */
+ showLink?: boolean;
+ /** 是否显示父级菜单 `可选` */
+ showParent?: boolean;
+ /** 页面级别权限设置 `可选` */
+ roles?: Array;
+ /** 按钮级别权限设置 `可选` */
+ auths?: Array;
+ /** 路由组件缓存（开启 `true`、关闭 `false`）`可选` */
+ keepAlive?: boolean;
+ /** 内嵌的`iframe`链接 `可选` */
+ frameSrc?: string;
+ /** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
+ frameLoading?: boolean;
+ /** 页面加载动画（有两种形式，一种直接采用vue内置的`transitions`动画，另一种是使用`animate.css`写进、离场动画）`可选` */
+ transition?: {
+ /**
+ * @description 当前路由动画效果
+ * @see {@link https://next.router.vuejs.org/guide/advanced/transitions.html#transitions}
+ * @see animate.css {@link https://animate.style}
+ */
+ name?: string;
+ /** 进场动画 */
+ enterTransition?: string;
+ /** 离场动画 */
+ leaveTransition?: string;
+ };
+ // 是否不添加信息到标签页，（默认`false`）
+ hiddenTag?: boolean;
+ /** 动态路由可打开的最大数量 `可选` */
+ dynamicLevel?: number;
+ /** 将某个菜单激活
+ * （主要用于通过`query`或`params`传参的路由，当它们通过配置`showLink: false`后不在菜单中显示，就不会有任何菜单高亮，
+ * 而通过设置`activePath`指定激活菜单即可获得高亮，`activePath`为指定激活菜单的`path`）
+ */
+ activePath?: string;
+ }
+
+ /**
+ * @description 完整子路由配置表
+ */
+ interface RouteChildrenConfigsTable {
+ /** 子路由地址 `必填` */
+ path: string;
+ /** 路由名字（对应不要重复，和当前组件的`name`保持一致）`必填` */
+ name?: string;
+ /** 路由重定向 `可选` */
+ redirect?: string;
+ /** 按需加载组件 `可选` */
+ component?: RouteComponent;
+ meta?: CustomizeRouteMeta;
+ /** 子路由配置项 */
+ children?: Array;
+ }
+
+ /**
+ * @description 整体路由配置表（包括完整子路由）
+ */
+ interface RouteConfigsTable {
+ /** 路由地址 `必填` */
+ path: string;
+ /** 路由名字（保持唯一）`可选` */
+ name?: string;
+ /** `Layout`组件 `可选` */
+ component?: RouteComponent;
+ /** 路由重定向 `可选` */
+ redirect?: string;
+ meta?: {
+ /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */
+ title: string;
+ /** 菜单图标 `可选` */
+ icon?: string | FunctionalComponent | IconifyIcon;
+ /** 是否在菜单中显示（默认`true`）`可选` */
+ showLink?: boolean;
+ /** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */
+ rank?: number;
+ };
+ /** 子路由配置项 */
+ children?: Array;
+ }
+}
+
+// https://router.vuejs.org/zh/guide/advanced/meta.html#typescript
+declare module "vue-router" {
+ interface RouteMeta extends CustomizeRouteMeta {}
+}