useRecentMenus
最近访问菜单管理 Composable，用于记录和展示用户最近访问的页面。
功能说明
- 本地持久化：存储到
localStorage - 自动去重：同一页面不重复记录
- 数量限制：默认保留最近 8 条
- 时间格式化：显示"刚刚"、"X分钟前"等友好格式
基础用法
typescript
import { useRecentMenus, addRecentMenu } from '@/composables'
const { recentMenus, clearRecentMenus, formatVisitTime } = useRecentMenus()
// 记录访问（通常在路由守卫中调用）
addRecentMenu('/system/user', '用户管理', 'user')
// 清空记录
clearRecentMenus()1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
返回值
| 属性/方法 | 类型 | 说明 |
|---|---|---|
| recentMenus | Ref<RecentMenuItem[]> | 最近访问菜单列表 |
| clearRecentMenus | () => void | 清空所有记录 |
| formatVisitTime | (timestamp: number) => string | 格式化访问时间 |
类型定义
typescript
interface RecentMenuItem {
path: string // 菜单路径
title: string // 菜单标题
icon?: string // 菜单图标
visitedAt: number // 访问时间戳
}1
2
3
4
5
6
2
3
4
5
6
自动记录
路由守卫中自动记录访问：
typescript
// src/router/guards/index.ts
router.afterEach((to) => {
addRecentMenu(to.path, to.meta.title, to.meta.icon)
})1
2
3
4
2
3
4
以下路径不记录：
/dashboard、/redirect、/404、/401、/login、/
存储机制
- 存储位置：
localStorage - 存储键名：
recent_menus - 最大条数：8 条
- 去重规则：按
path去重，重复访问移到最前