Put the router configuration in a separate file in Aurelia

Question

I am trying to extract the router configuration from the app.js file and put it in a separate file ( app.router.js ). This is probably easy to do, but I don’t know how to do it.

The current app.js file is as follows:

 import {Router} from 'aurelia-router'; export class App { static inject() { return [Router]; }; constructor(router) { this.router = router; // router - put this part in a separate file this.router.configure(config => { config.title = 'demo'; config.options.pushState = true; config.map([ // home routes { route: ['','home'], moduleId: './home/home', nav: true, title:'Home' }, // User routes { route: ['user/register'], moduleId: './user/register', nav: true, title:'User Registration'} ]); }); } } 

As soon as part of the configuration is in a separate file, I believe that I call it in app.js :

 this.router.configure(myRouterConfig); 

Please let me know how to do this with sample code.

Answer 1

The solution is easier to understand when you realize that the argument you pass to this.router.configure is just a function. To place the router configuration in a separate file, simply export this file to a function that takes one argument ( config ).

 // app.router.js export default function (config) { config.title = 'demo'; config.options.pushState = true; config.map([ // home routes { route: ['','home'], moduleId: './home/home', nav: true, title:'Home' }, // User routes { route: ['user/register'], moduleId: './user/register', nav: true, title:'User Registration'} ]); } 

Then in app.js :

 import appRouter from 'app.router'; // ...then... this.router.configure(appRouter); 

You can, of course, call appRouter anything.