Redirect to URL and append hash at the end - aurelia

Question

I'm trying to redirect to a route/URL and append a hash at the end, but Aurelia keeps telling me ERROR [app-router] Error: Route not found: /#the-hash-i-added.
Here's the very basic code I'm using to redirect to a new route inside my authorize pipeline step:
return next.cancel(new Redirect(this.router.generate('home')));
This works fine and redirects non authorized users to the home page. However, I'd like them to end up at one specific part on the home page, hence the hash.
Now, since the Redirect class takes a URL as its argument, I figured I'd simply add the hash at the end, like so:
return next.cancel(new Redirect(this.router.generate('home') + '#hash-where-i-want-to-end-up'));
And while Aurelia successfully redirects to the correct URL (/#hash-where-i-want-to-end-up is set in the browser's URL bar) it still throws the aforementioned error and does not render the page.
I actually managed to hack around this by manually adding the hash after the redirect occurred, with a setTimeout:
setTimeout(() => {
window.location.hash = '#hash-where-i-want-to-end-up';
});
return next.cancel(new Redirect(this.router.generate('home')));
But not only does this feel like a dirty, dirty hack, it doesn't work well in other scenarios.
So, my question is, how can I redirect to a route and append a hash at the end?
Needless to say I'm using pushState: true and hashChange: false in my application.
Edit: I couldn't get a pushState app running on gist.run for some reason, but I set up a completely new Aurelia CLI project with this very basic setup:
app.js
import {inject} from 'aurelia-framework';
import {Router, Redirect} from 'aurelia-router';
export class App {
configureRouter (config, router) {
config.title = 'Test';
config.options.pushState = true;
config.options.hashChange = false;
config.options.root = '/';
config.map([
{
route: [''],
name: 'home',
moduleId: 'resources/elements/home',
title: 'Home'
},
{
route: ['about'],
name: 'about',
moduleId: 'resources/elements/about',
title: 'About',
settings: {auth: true}
},
]);
config.addAuthorizeStep(AuthorizeStep);
}
}
#inject(Router)
class AuthorizeStep {
constructor (router) {
this.router = router;
}
run (navigationInstruction, next) {
// Never allow access to auth routes
if (navigationInstruction.getAllInstructions().some(i => (i.config.settings && i.config.settings.auth))) {
return next.cancel(new Redirect(this.router.generate('home') + '#foo'));
}
return next();
}
}
app.html
<template>
<a route-href="route: home">Home</a> | <a route-href="route: about">About</a>
<router-view></router-view>
</template>
home.js
export class Home {}
home.html
<template>
<h1>Home</h1>
</template>
about.js
export class About {
}
about.html
<template>
<h1>About</h1>
</template>
As you can see, going to /about should redirect you back to /#foo, and while that indeed works (the user ends up at /#foo) I get the same error: vendor-bundle.js:14169 ERROR [app-router] Error: Route not found: /#foo