Vue-router: how do route children and named components work?

I’m looking for some more detailed documentation on how vue-router works, particularly with respect to named components, nested components and child routes. The standard docs don’t seem to explain this very well.

What I’m trying to do is decouple behaviour from presentation for a set of complex components. Basically, the components contain more components, and what happens when you click on one of those components, should be dynamically configurable. For example, in one case, you get a sidebar with details of the component you clicked on, in another case, you might want to select multiple components to show the sums of some details across the selected collection, or even select multiple components to hand off to a someone else’s page that loaded my component in an iframe.

Normally when reusing behaviour, mixins sound like the right approach, but mixins are still tightly coupled to the component that uses them. I want them to be more dynamic than that, and I figured vue-router should be able to do that. And it does, but I did have to restructure the way routing works, and that’s where I got confused.

In short, I’m wrapping the clickable component in this:

    <router-view name="behaviour" :element="element">
        <rest of the component/>
    </router-view>

App.vue contains a few more named components, most importantly:

    <router-view class="side-menu" name="menu"></router-view>

and

    <router-view></router-view>

My basic route looked something like:

    {
      path: '/foo/overview',
      name: 'model',
      components: {
        default: FooModel,
        menu: SidebarContainer,
        behaviour: ShowDetailsBehaviour
      },

Behaviour on this level didn’t work. What did work was putting the behaviour in a child:

    {
      path: '/foo/',
      components: {
        default: FooModel,
        menu: SidebarContainer,
      },
      children: [{
        path: 'overview',
        name: 'dashboard',
        components: {
          behaviour: ShowDetailsBehaviour,
        }
      }]
    }

This works fine, but it’s ugly, because it suggests ‘/foo/’ is a valid route, which it isn’t. And also, I’ve got a few more related routes that I’d like to handle. After clicking on a specific component, you go to /foo/overview/:id which shows details of :id in a sidebar, together with a button that takes you to /foo/overview/:id/children which shows a sub-model with just the selected component and its children in my hierarchical data model. For this I want to use a new component FooSubModel as the default component.

I tried this:

    {
      path: '/foo/',
      components: {
        default: FooModel,
        menu: SidebarContainer,
      },
      children: [{
        path: 'overview',
        name: 'dashboard',
        components: {
          behaviour: ShowDetailsBehaviour,
        },
        children: [
          {
            path: ':id',
            name: 'fooDetail',
            children: [{
                path: 'children',
                name: 'submodel',
                components: {
                    default: FooSubModel,
                },
                children: [
                {
                    path: ':child',
                    name: 'fooSubDetails',
                },
            ]
          },
        ]
      }]
    }

Sadly that didn’t work. That nested ‘default’ doesn’t override the original default, probably for the same reason that the ‘behaviour’ component needed to be in a child rather than the top-level route.

But I don’t understand this reason, and that’s frustrating me. To use SubModel, I need to make ‘/foo/overview/:id’ a top-level route that doesn’t get used but looks like it conflicts with the grandchild of ‘/foo/’, so I can put the behaviour in its child, and give that child more children for the actual children. Like this:

    {
      path: '/foo/overview/:id/',
      components: {
        default: FooSubModel,
        menu: SidebarContainer,
      },
      children: [{
        path: 'children',
        name: 'submodel',
        components: {
          behaviour: ShowDetailsBehaviour,
        },
        children: [
          {
            path: ':child',
            name: 'fooSubDetails',
          },
        ]
      }
      ],
    }

And this works, but man is it ugly. Is there a better way to do this? Is there more detailed documentation somewhere or an article that explains this better?

(Ideally I’d also like the used components to be driven by path parameters, because like this I’m going to have to write every possible combination between a model type and a behaviour type, with all their children and related paths.)