Aurelia: Child Router Navigation: Route not found

问题:

Below are my views: 1. app - standard 2. home - Has a list of items on left, on selection of any, will display some content on the right side in router-view (contract-view to be loaded). 3. contract-view

app.ts: route Config:

configureRouter(config: RouterConfiguration, router: Router) {
        config.title = 'Contracts Portal';
        config.map([
            { route: ['', 'home'], name: 'home', moduleId: 'home', nav: true, title: 'Home' },
            { route: 'resources', name: 'resources', moduleId: 'resources', nav: true, title: 'Resources' },
            { route: 'tools', name: 'tools', moduleId: 'tools', nav: true, title: 'Tools' }
        ]);
        this.router = router;
    }

Home.ts Router Config:

configureRouter(config: RouterConfiguration, router: Router) {
        config.title = "test";
        config.map([
            { route: ['', 'contract-view/:id'], name: 'contract-view', moduleId: 'contract-view', nav: true, title: 'Test' } 
        ]);
        this.router = router;
    }

on selection of a item in home page list, I am trying to navigate as below to load content in the right pane's router-view, in home.ts:

this.router.navigateToRoute("contract-view", { id: 4090 });

However it throws the error: Route not found: /contract-view/4090

At this point, it's still home page and default route, hence the url reads: http://localhost:9000/#/ and so it fails. But, if I manually change the url to http://localhost:9000/#/home and then select a list item, navigation to contract-view works. What I am I missing here?

I am looking for absolute path navigation. Tried navigating to home/contract-view but fails with error: A route with name 'home/contract-view' could not be found. Check that name: home/contract-view was specified in the route's config.

回答1:

The default route of Home.ts has a parameter:

config.map([
     { route: ['', 'contract-view/:id'], name: 'contract-view', moduleId: 'contract-view', nav: true, title: 'Test' } 
]);

This might be a problem because the parameter :id is not referenced in the first name. So, I suggest you change the route as follow:

config.map([
     //create another route with no parameters,
     //this route will represent an empty selection of contract
     { route: [ '', 'contract-view' ], name: 'contract-view-empty', moduleId: 'contract-view-empty', Title: 'Select a Contract' } 
     { route: 'contract-view/:id', name: 'contract-view', moduleId: 'contract-view', nav: true, title: 'Test' } 
]);

Then, to generate a navigation link you can use route-href attr. Like this:

<a route-href="route: contract-view; params.bind: { id: 4090 }">Navigate</a>

Hope it helps!

回答2:

It is an issue with Aurelia Router framework. Discussion and workaround here: https://github.com/aurelia/skeleton-navigation/issues/230