Aurelia JS Trailing Slash on URLs

Question

Does anyone know of a way to add a trailing slash in Aurelia, on the URLs generated with <a route-href="route: route_name; params.bind: {...}">${link.title}</a>?

I've tried modifying the navModel and I've searched for an option in routerConfig that could do this, but haven't found any.

PS: I'm using HTML5 pushState and have removed the hash.

config.options.pushState = true;
config.options.hashChange = false;

UPDATE

I ended up targeting the router:navigation:complete event to achieve this. It's an ugly hack in my opinion but if gives me what I need:

this.eventAggregator.subscribe('router:navigation:complete', 
    if (!/\/$/.test(window.location.pathname)) {
        window.history.replaceState({}, document.title, window.location.pathname + '/');
    }
});

have you tried adding the trailing slash to the route configurations? — Matthew James Davis, Oct 19 '16 at 08:44
Different case here: I am using FB.getLoginStatus and I need this only for the root URL (seems that FB redirect URI is always extended with trailing slash). I tried both '' and '/' in the main route - the URL is alwasy without the trailing slash. — andy250, Oct 28 '16 at 14:13
I've added that piece of code in the `constructor` of my main app class. I use that singleton for storing the app state. — BogdanArvinte, Dec 06 '16 at 10:05

score 0 · Answer 1 · answered Oct 09 '16 at 11:07

0

You can add +'/' at the end of params.bind. Like this:

<a route-href="route: route_name; params.bind: {... + '/'}">${link.title}</a>

answered Oct 09 '16 at 11:07

fj.agmedia

87
5

This seems to work, but I'm looking for a more configurable solution, one that also targets routes that do not have `params` and which doesn't require manual updates in all locations where `route-href` is used. – BogdanArvinte Oct 10 '16 at 08:10
Yes, I know what you mean. Haven't found a more elegant solution jet. So far I've put the `/` in a constant to escape the problem you mentioned. If you find a better solution, do post it. – fj.agmedia Oct 22 '16 at 08:07

score 0 · Answer 2 · answered Aug 21 '18 at 06:57

Aurelia router (to be precise AppRouter which extends Router) allows for using pipelines, which seems to be a perfect place to do something upon route change (for example authorize a user, scroll to the top or add a trailing slash).

Possible usage might be as follows:

import {PLATFORM} from 'aurelia-pal' // in case you use webpack

export class App {
  configureRouter(config, router) {
    config.title = 'Page title'
    config.options.pushState = true
    const preRenderStep = {
      run(navigationInstruction, next) {
        window.history.replaceState({}, document.title, window.location.pathname + '/');
        return next();
      }
    }

    config.addPreRenderStep(preRenderStep)
    config.map([
      {
        route:    [''],
        title:    'Home',
        name:     'home',
        moduleId: PLATFORM.moduleName('home'),
      },
    ])
  }
}

Maybe it'd be possible to modify some prop in navigationInstruction (possibily in another pipeline step - preRender seems to be too late for that) and get rid off replacing history state altogether. I haven't checked that, though.

Aurelia JS Trailing Slash on URLs

2 Answers2