Vue introduces multiple components in vue-router by nesting named views, and does not refresh the same reference in other pages.

in router.js, because the breadcrumb component is used in multiple pages, the breadcrumb component is referenced by nested named views:

{
    path: "/Manage",
    name: "",
    component: function(res) {
        require(["../components/common/layoutComponent"], res)
            },
        props: true,
        children: [
            {
                path: "/Manage/ProjectManage",
                name: "",
                components:  {
                    default: function(res) {
                        require(["../components/work/SystemManage/ProjectManage"], res)
                        },
                    breadHelp: function(res) {
                        require(["../components/common/breadCrumb/breadForSystemManage"], res)
                    },
                },
                props: true,
            },]

in the overall layout:

<el-main class="mainDiv">
    <!-- <breadForSystemManage></breadForSystemManage> -->
    <router-view name="breadHelp"/>
    <router-view/>
</el-main>

now on the page, when you jump to the route, no matter how you jump to the breadcrumb, it will not be updated on the page that also refers to breadcrumbs. Where may be the missing processing?

Feb.26,2021

resolved:
listen for routing update components via watch in the breadcrumb component

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-1edc6aa-496b0.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-1edc6aa-496b0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?