用 computed 动态生成面包屑路径，直接从 $route.matched 提取 meta.title 实时响应路由变化，支持 hideInBreadcrumb 过滤、动态参数标题及多语言映射，一行计算属性即可实现。

用 computed 动态生成面包屑路径

面包屑本质是当前路由的层级路径展示，不需要额外状态管理。直接在组件内用 computed 从 $route.matched 中提取元信息即可实时响应路由变化。

关键点在于：Vue Router 的 $route.matched 是一个按匹配顺序排列的路由记录数组，每个记录包含 name、path、meta 等字段。只要在 meta 中提前定义好 title（或 breadcrumb），就能逐级拼出面包屑链。

在路由配置中统一约定 meta 字段

所有需要出现在面包屑里的路由，必须在定义时设置 meta: { title: '用户管理' }。顶层路由（如 Dashboard）可设为根节点，不显示或显示为首页图标。

• 嵌套路由要逐层声明 title，比如 /system/user → system 路由设 meta.title = '系统设置'，user 路由设 meta.title = '用户列表'
• 避免在 meta 中写死 i18n key，推荐直接写中文或使用计算属性做多语言映射
• 可加 meta.hideInBreadcrumb: true 跳过某级（如登录页、404）

在页面组件中编写响应式 computed

不用 watch、不用 mounted，一行 computed 就搞定：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

breadcrumbList() {
  return this.$route.matched.filter(route => route.meta.title && !route.meta.hideInBreadcrumb).map(route => ({
    title: route.meta.title,
    path: route.path
  }));
}

模板中遍历渲染即可，点击跳转用 $router.push(item.path)，支持编程式导航和 keep-alive 缓存。

进阶：支持动态路由参数与别名标题

当路由含参数（如 /user/:id/edit），meta.title 是静态的，但你想显示“编辑张三”，就需要结合 $route.params 实时计算。

• 在 meta 中预留函数字段：meta: { getTitle: route => `编辑 ${route.params.name || '用户'}` }
• computed 内判断 typeof route.meta.getTitle === 'function'，再执行获取真实标题
• 也可配合 Vuex 或 Pinia 缓存用户数据，避免重复请求

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！