用 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 就搞定：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“前端免费学习笔记（深入）”；
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 缓存用户数据，避免重复请求
