Configured router

vNext
1

I can’t seem to figure out how the routing model is supposed to work. While routing works and I can configure routes, I have no idea how to manage and render the navigation tree.
In Au1 I had an auxillary structure, that basically managed state and allowed for a global tree menu. I was hoping something along those lines would be implemented OOTB in vnext. Something like the following:

root-component:

@routes({
    {
       {
            path: ['', 'page1'],
            component: () => import('./page-one'), // lazy
            title: 'p1'
        },
        {
            path: ['page2'],
            component: () => import('./page-two'), // lazy
            title: 'About'
        },
	[...]
    }
})
export class Root [...]

nav-component.ts:

@inject(IRouteContext)
export class NavComponent {

    constructor(private routeContext: IRouteContext) {}
[...]

nav-item.html:

<nav-item repeat.for="promise of routeContext.childRoutes" deferred.bind="promise"></nav-item>

Nav-item would then resolve the promise to a RouteConfig and render title etc. However, RouteConfig has no info on the router state, e.g. is it active or not? I could use the IRouterEvents to get some info, but there’s no reference to the id of the current route AFAIK, so its hard to link together without simply comparing URL’s.
Anyways, I doubt that this is the ‘correct’ way of handling this. In the docs (docs.aurelia.io) there’s a short example;

<a active.class="_settings" load="route:settings; active.bind:_settings">
    Settings
</a>

But I don’t really get the binding here, what model is being bound to? Is it a RouteNode? How would I get that after configuring the router? Any help or clarification would be highly appreciated.

1 Like