-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 路由
meta添加activePath可将某个菜单激活，主要用于通过query或params传参的路由
- Loading branch information
1 parent
5d86b71
commit 58cafbc
Showing
9 changed files
with
135 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<string>; | ||
| /** 按钮级别权限设置 `可选` */ | ||
| auths?: Array<string>; | ||
| /** 路由组件缓存（开启 `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<RouteChildrenConfigsTable>; | ||
| } | ||
|
|
||
| /** | ||
| * @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<RouteChildrenConfigsTable>; | ||
| } | ||
| } | ||
|
|
||
| // https://router.vuejs.org/zh/guide/advanced/meta.html#typescript | ||
| declare module "vue-router" { | ||
| interface RouteMeta extends CustomizeRouteMeta {} | ||
| } |
58cafbcThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
activePath将某个菜单激活（主要用于通过query或params传参的路由，当它们通过配置showLink: false后不在菜单中显示，就不会有任何菜单高亮，而通过设置activePath指定激活菜单即可获得高亮，activePath为指定激活菜单的path）未设置
activePath：设置
activePath后：58cafbcThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
当然从逻辑上 本身就不应该激活 因为不是同一个路由，不过有不少用户提了这个需求，这里就加上了