Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Indexable routes

This example will allow for decorating all or some routes of a router with a different routing strategy. Here we check if the settings option indexed: true. If it is set, we then reconfigure the routing path to joinPath(moduleId, 'index') This allows for easy nested routing per folder, for the following type of application layout.

pages
  index
  contacts
    index

Pretty awesome!

However would be nice if we could centralise this kind of logic on the router itself instead of having to go through all this on the individual route level :P

// alternative way
ChildRouteLocator.prototype.convertInstructionToConfigurationUrl = (instruction) => {
};
import {Router, RouterConfiguration} from 'aurelia-router';
import {inject} from 'aurelia-framework';
// Decoarate with indexed: true setting on all routes
let routes = [
{ route: '', moduleId: 'pages', title: 'Home', name: 'home', nav: true },
{ route: 'account', moduleId: 'pages/account', title: 'Account', name: 'account', nav: true }
]
const indexedRoutes = routes.map(route => {
route['settings'] = {indexed: true};
return route;
})
function joinPath(path, postFix) {
let lastChar = path[path.length -1];
if (lastChar !== '/') {
postFix = '/' + postFix;
}
return path + postFix;
}
function navStrat(instruction) {
let path = joinPath(instruction.fragment, 'index');
instruction.config.moduleId = path;
instruction.config.href = instruction.fragment;
}
function indexable(route) {
if (route.settings && route.settings.indexed) {
route.navigationStrategy = navStrat;
}
return route;
}
export class App {
router: Router;
constructor() {}
configureRouter(config: RouterConfiguration, router: Router){
config.title = 'Contacts';
config.map(routes.map(indexable));
this.router = router;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.