title: Aurelia load routes dynamically / from fetch
body: <p>I want to load menu options dynamically. so I'm wondering the best approach</p>
  
  <p>I am able to use the code below to add routes after the page is loaded. This works for normal navigation, but does not work during a refresh.</p>
  
  <p>Can configure router return a promise / how do I load menu items into the route?</p>
  
  <pre><code> @inject(HttpClient)
   export class DocumentMenu {
    router: Router;
    documents : IDocument[];
    heading = 'Document Router';
  
    constructor(public http: HttpClient) {}
  
   activate(): void {
  
      this.http.fetch('http://localhost:17853/Document/GetDocuments?folderID=13244')
        .then&lt;IDocument[]&gt;(response =&gt; response.json())
        .then&lt;IDocument[]&gt;(docs =&gt; {    
        if ( docs ){
          for( var doc of docs){
            this.router.addRoute( { route : doc.DocumentID.toString(), name : doc.Name, moduleId: './documents/document', nav:true, title: doc.Name });
          }
          this.router.refreshNavigation();
        }
        return docs;
      });
  
   }
  
  configureRouter(config: RouterConfiguration, router: Router) {
  
    var routes = new Array();
    routes.push( 
    { route: 'index', name: 'index-name', moduleId: './documents/index', nav: false, title: 'Documents' } );
    routes.push(       { route: '', redirect: 'index' } );
  
    config.map( routes );
    this.router = router;
  }
  }
  </code></pre>