vue 动态面包屑怎么实现

Question

这是我的路由配置

{
            path: '/todo/Todo',
            name: 'Todo',
            component: () => import('./views/todo/Todo'),
            meta: {
                title: '我的待办'
            }
        },
        {
            path: '/todo/TodoDetail',
            name: 'TodoDetail',
            component: () => import('./views/todo/TodoDetail'),
            meta: {
                title: '待办详情'
            }
        },
        {
            path: '/statistics/AssetsPackageStatistics',
            name: 'AssetsPackageStatistics',
            component: () => import('./views/statistics/AssetsPackageStatistics'),
            meta: {
                title: '统计'
            }
        },

所有的路由都没有嵌套， 都是这样写下来的。现在改成嵌套的话，比较麻烦了
需求是这样的
1、当我从首页点击进入某个页面的详情页。面包屑变成 首页/ 详情页
2、当我从导航的A页面进入 详情页 变成 首页/A/详情页

问题： 请问这样的该如何实现？
我用了全局守卫 但是得到的数据无法使用

Answer 1

如果不改变当前路由结构的话，可以在 meta 中定义其父级 id 或 title ，当前路由的 meta 存在 父级 id 时，寻找其父级路由并获取其 title 。