嵌套路由中如何实现动态 Tab 页签标题？基于当前路由名的自动更新-Vue.js-PHP中文网

动态tab页签标题通过路由meta.title配置与matched数组解析实现：为每个路由设meta.title（支持字符串或函数），tab组件监听route变化，取matched最后一个有title的记录并执行函数或取值，结合fullpath去重更新标题。

嵌套路由中如何实现动态 tab 页签标题？基于当前路由名的自动更新

在嵌套路由中实现动态 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 || '未知页面'