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"/>

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?


listen for routing update components via watch in the breadcrumb component