Scrum / vue-2-breadcrumbs

Vue breadcrumbs
MIT License
98 stars 20 forks source link

Can you make parameter that will mean that parent chain will full replace without save previous parent chain #102

Open aprogrom opened 4 years ago

aprogrom commented 4 years ago

Hi, in my project i am need full replace in parent breadcrumbs chain, some like that: We have one unique page and two jump paths to it

Base > Group list > Group detail Base > Member list > Member detail > Group detail

The first is main route in router tree to page with data, it used when user go from leftbar menu. The second path is jumps to page, that path used when user go from leftbar menu to member detail page and use link to group. All of i need is to show breadcrumb with that jumps path. And in that case full replace parent chain in breadcrumbs will protect me from make two children tree in router.

Thank you in advance, and sorry for my bad english.

Scrum commented 4 years ago

@aprogrom Hi, your English is good, but let's try to concentrate on your problem, could you sketch an example of what happens and what you expect, it would be cool if you can put it on the github

aprogrom commented 4 years ago

@Scrum, Hi. I will try to explain:

We have two different pages, the first is member detail of global group named cathedra, the second is subgroup detail named education group. The jumps to all of those page make from pages of list, they available in leftbar menu. That pages have his own inheritence tree with own childrens(pages of related data and actions with that data objects) and parents(list page and it parent page), but all of member global group consist in subgroup and have link to his own subgroup, subgroup have list of own member whith link to each of all also.

And In breadcrumbs on education group page we have: Cathedra > Group list > Group

on student page we have: Cathedra > Student list > Student

And when we try jump from student detail page to education group detail page by link when we having that code in route object breadcrumbs meta attribute:

breadcrumb (params) {
    if(this.$route.query.from_student)
        return {
            label: 'Группа',
            parent: names.CathedraStudentsDetail,
        }
    else
        return 'Группа'
}

in breadcrubs we have that picture: Cathedra > Group List > Cahtedra > Student list > Student > Group

But we expect: Cahtedra > Student list > Studetn > Group

Or if we jump to studet page from group we have: Cahtedra > Student list > Cathedra > Group List > Group > Student

when we expect: Cathedra > Group List > Group > Student

As we can see, the breadcrumbs code dont replace parent, it just add new parent tree between our page and it own parent tree. Is is not bad, but in some situations maybe need different behavior, that i am can named full replace. If i am right think, it is there: index.ts at 35 line

get(): RouteRecord[] {
    return this.$route.matched
        .flatMap((route: RouteRecord) => {
            let routeRecord: RouteRecord[] = [route];
            let breadcrumb = route.meta?.breadcrumb;
            if (typeof breadcrumb === 'function') {
                breadcrumb = breadcrumb.call(this, this.$route.params);
            }
            if (breadcrumb?.parent) {
                const matched = this.$router.resolve({ name: breadcrumb.parent }).route.matched
                routeRecord = [...matched, ...routeRecord]; << here we can foresee different bechaviour
            }
            return routeRecord
        })
        .map((route: RouteRecord) => route.path.length === 0
            ? ({ ...route, path: '/' })
            : route
        );
}
Scrum commented 4 years ago

@Scrum This example was enough for me to roughly understand your goal.

in breadcrubs we have that picture: Cathedra > Group List > Cahtedra > Student list > Student > Group

But we expect: Cahtedra > Student list > Studetn > Group

Or if we jump to studet page from group we have: Cahtedra > Student list > Cathedra > Group List > Group > Student

when we expect: Cathedra > Group List > Group > Student

It will take me a while to think about this solution.

If you already have a solution, feel free to suggest it.