Aurelia load routes dynamically / from fetch

Question

I want to load menu options dynamically. so I\'m wondering the best approach

I am able to use the code below to add routes after the page is loaded. This works for n

Answer 1

To make this work, I created the routes in the constructor with a synchronous request

export class DocumentMenu {
...
routes  : RouteConfig[];

constructor(http: HttpClient) {
  this.http = http;

  var folderID = window.location.hash.split('/')[2]

  this.routes = new Array();
  this.routes.push ( { route: 'index', name: 'index-name', moduleId: './documents/index', nav: false, title: 'Documents' });
  this.routes.push ( { route: '', redirect: 'index' } );

  for( var route of this.getRoutes( folderID )){
    this.routes.push( route );
  }
}

getRoutes(folderID: string) :  RouteConfig[]
{
  var routes = new Array();
  var docsURL = 'http://localhost:17853/Document/GetDocuments?folderID=' + folderID;

  // synchronous request   
  var docsResp = $.ajax({
      type: "GET",
      url: docsURL,
      async: false,
      cache:false
  }).responseText;

  var docs = JSON.parse( docsResp );

  for( var doc of docs ){
    routes.push( { route : doc.DocumentID.toString(), name : doc.Name, moduleId: './documents/document', nav:true, title: doc.Name });
  }

  return routes;
}

configureRouter(config: RouterConfiguration, router: Router) {  
   config.map( this.routes );
   this.router = router;
 }
...