动态Tab页签标题通过路由meta.title配置与matched数组解析实现：为每个路由设meta.title（支持字符串或函数），Tab组件监听route变化，取matched最后一个有title的记录并执行函数或取值，结合fullPath去重更新标题。
在嵌套路由中实现动态 Tab 页签标题，核心是让 Tab 标题能响应当前激活的路由（尤其是嵌套路由的子路径），并自动更新。关键不在于手动维护标题列表，而在于利用路由元信息（meta） + 路由匹配逻辑，从当前 route 对象中可靠地提取出“应显示的标题”。
1. 在路由配置中统一定义 meta.title
为每个路由（包括嵌套路由）设置明确的 meta.title，支持字符串或函数。函数形式可接收 to 参数，用于处理带参数的动态标题（如“用户详情 - 张三”）：
{
path: '/admin',
component: AdminLayout,
children: [
{
path: 'users',
name: 'UserList',
component: UserList,
meta: { title: '用户管理' }
},
{
path: 'users/:id',
name: 'UserDetail',
component: UserDetail,
meta: {
title: (to) => `用户详情 - ${to.params.id}`
}
}
]
}2. 在 Tab 组件中监听 route 变化并解析标题
Tab 列表通常由一个数组驱动（如 tabs）。不要硬编码标题，而是基于当前路由对象实时计算：
- 使用
useRoute()获取当前to，再遍历其matched数组（含所有嵌套匹配的路由记录） - 从
matched中找到最后一个有meta.title的记录（即最深层的有效路由） - 若
meta.title是函数，调用它传入to；否则直接取字符串值
3. 处理多级嵌套与命名视图场景
当存在多层嵌套（如 /a/b/c）或命名视图时，to.matched 仍按匹配顺序排列，末尾元素始终是最具体的路由记录。无需关心层级深度，只需取 to.matched.at(-1) 即可安全获取当前页对应路由：
const route = useRoute() const activeMatched = route.matched.at(-1) const title = typeof activeMatched?.meta.title === 'function' ? activeMatched.meta.title(route) : activeMatched?.meta.title || '未知页面'
4. 配合 Tab 管理逻辑避免重复添加
动态标题本身不解决 Tab 去重问题。需结合 Tab 缓存策略：
- 以
route.fullPath或route.name + JSON.stringify(route.params)作为 Tab 的唯一 key - 每次导航后，检查该 key 是否已存在；不存在则 push 新 Tab，并用上述方式生成初始标题
- 存在则更新其标题（防止参数变化后标题未刷新）
