problem description

A problem often encountered in work is the page scrolling of sub-routes under multi-level routing.
is when using vue (with vue-router) to do a single-page application, because there is an obvious routing level on the page. So it is designed to be in a nesting format of routing components, such as router.js.

{
    path: "/list",
    name: "",
    component: () => import("./views/list.vue"),
    children: [
        {
            path: "/list/detail",
            name: "",
            component: () => import("./views/detail.vue")
        }
    ]
}

the environmental background of the problems and what methods you have tried

the home page is a list display page, then click on the list element to jump to the details page.

// 
<template>
    <div class="list">
        , 100%,,,
        <router-view class="detail"></router-view>
    </div>
    <script></script>
    <style>
        .detail {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }
    </style>        
</template>

// 
<template>
    <div class="detail" ref="detail">
        ,fixed, 
    </div>
    <script></script>
    <style></style>        
</template>

because the list page already occupies the entire browser window size, the detail page can only be suspended and laid out with fixed or absolute

to solve this problem, all I can think of is to introduce scrolling plug-ins. I introduced the better-scroll plug-in of teacher Huang Yi. Just new BScroll (this.$refs ["detail"]) and you can simulate scrolling.

at this time, I think my work is finished. But when my leader saw it (the leader is a technical bull), he said that the scrolling effect of this detail page was very unnatural, and he criticized me, saying that it was not as good as the original scrolling effect and could not take out his hand, and ordered me not to use this plug-in in the future. Haha, I don"t know whether to criticize me or this plugin.

I disagree with the leader"s criticism, but I have admitted that there is a gap between the simulated effect and the original effect.

then the plan given by the leader is to design the route as a level

{
    path: "/list",
    name: "",
    component: () => import("./views/list.vue")
},
{
    path: "/detail",
    name: "",
    component: () => import("./views/detail.vue")
}

well, in fact, individuals do not agree with this scheme.
because our products must have more than these two routes, at least dozens of routes, all designed to level in order to avoid scrolling problems, so the routing configuration file will be very ugly to write, does not reflect the idea of componentization, and feels like a page with the same function as jsp.
of course, because of horizontal reasons, event transmission between components (what child passes from father to father, etc.) Don"t think about what the father passes on to the son, props). After all, the leader is the biggest, and I have replaced

but it is not the way to go on like this, and we will definitely encounter similar problems in the future.
I would like to ask the bigwigs of the technology circle, if I insist on nesting routing components, that is, this way of writing

{
    path: "/list",
    name: "",
    component: () => import("./views/list.vue"),
    children: [
        {
            path: "/list/detail",
            name: "",
            component: () => import("./views/detail.vue")
        }
    ]
}

I don"t want to scroll unnaturally. What should I do?