mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-22 22:16:18 +08:00
perf: perf the control logic of Tab (#6220)
* perf: perf the control logic of Tab * 每个标签页Tab使用唯一的key来控制关闭打开等逻辑 * 统一函数获取tab的key * 通过3种方式设置tab key:1、使用router query参数pageKey 2、使用路由meta参数fullPathKey设置使用fullPath或path作为key * 单个路由可以打开多个标签页 * 如果设置fullPathKey为false,则query变更不会打开新的标签(这很实用) * perf: perf the control logic of Tab * perf: perf the control logic of Tab * 测试用例适配 * perf: perf the control logic of Tab * 解决AI提示的警告
This commit is contained in:
@@ -339,6 +339,10 @@ interface RouteMeta {
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| string;
|
||||
/**
|
||||
* 路由的完整路径作为key(默认true)
|
||||
*/
|
||||
fullPathKey?: boolean;
|
||||
/**
|
||||
* 当前路由的子级在菜单中不展现
|
||||
* @default false
|
||||
@@ -502,6 +506,13 @@ interface RouteMeta {
|
||||
|
||||
用于配置页面的徽标颜色。
|
||||
|
||||
### fullPathKey
|
||||
|
||||
- 类型:`boolean`
|
||||
- 默认值:`true`
|
||||
|
||||
是否将路由的完整路径作为tab key(默认true)
|
||||
|
||||
### activePath
|
||||
|
||||
- 类型:`string`
|
||||
@@ -602,3 +613,32 @@ const { refresh } = useRefresh();
|
||||
refresh();
|
||||
</script>
|
||||
```
|
||||
|
||||
## 标签页与路由控制
|
||||
|
||||
在某些场景下,需要单个路由打开多个标签页,或者修改路由的query不打开新的标签页
|
||||
|
||||
每个标签页Tab使用唯一的key标识,设置Tab key有三种方式,优先级由高到低:
|
||||
|
||||
- 使用路由query参数pageKey
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
// 跳转路由
|
||||
const router = useRouter();
|
||||
router.push({
|
||||
path: 'path',
|
||||
query: {
|
||||
pageKey: 'key',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
- 路由的完整路径作为key
|
||||
|
||||
`meta` 属性中的 `fullPathKey`不为false,则使用路由`fullPath`作为key
|
||||
|
||||
- 路由的path作为key
|
||||
|
||||
`meta` 属性中的 `fullPathKey`为false,则使用路由`path`作为key
|
||||
|
Reference in New Issue
Block a user