How to realize vue dynamic bread crumbs

this is my routing configuration

{
            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: ""
            }
        },

all routes are not nested and are written in this way. Now change to nested, more troublesome
requirements are like this
1, when I click from the home page to go to the details page of a page. Bread crumbs become the home page / details page
2, when I enter the details page from the navigation page A to the home page / A / details page

question: how can this be realized?
I used the global guard, but the data I got cannot be used

Jan.27,2022

if you do not change the current routing structure, you can define its parent id or title in meta. When the meta of the current route has a parent id, look for its parent route and get its title.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3a867-2af63.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3a867-2af63.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?