Define a route based on the path not on the hash v

Question

The Aurelia router maps a route the the hash.

http://subdomain.hostname.tld/pathA/pathB/pathC?queryKey=queryValue#hash

How can we define an Aurelia route based on the pathA/pathB/pathC value instead?

Answer 1

Here's an example from the docs. But in order the #hash to work you'll need to specify config.options.hashChange as false:

import {Redirect, NavigationInstruction, RouterConfiguration} from 'aurelia-router';

export class App {
  configureRouter(config: RouterConfiguration): void {
    config.title = 'Aurelia';
    config.options.pushState = true;

    config.options.root = '/';
    config.options.hashChange = false;

    config.map([
      { route: ['welcome'],    name: 'welcome',     moduleId: 'welcome',      nav: true, title:'Welcome' },
      { route: 'flickr',       name: 'flickr',      moduleId: 'flickr',       nav: true, auth: true },
      { route: 'child-router', name: 'childRouter', moduleId: 'child-router', nav: true, title:'Child Router' },
      { route: '',             redirect: 'welcome' }
    ]);
  }
}

The important lines for your purpose are these two:

// switch from hash (#) to slash (/) navigation
config.options.root = "/";
config.options.hashChange = false;

Answer 2

You can set up Push State. This is discussed in our docs here: http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/2