(SOLVED-ish)In Aurelia Router is it possible to get notified when the user attempts to navigate to the same page?

Help Requests
1

The Aurelia Router fires off events in the EventAggregator which I can subscribe to. My code subscribes to the router:navigation:processing event so that whenever a user clicks a route my navigation menu closes.

eventAggregator.subscribe('router:navigation:processing', e => menu.close());

The problem is that when the user is on the page in which they are trying to navigate to, then the menu stays open. I would like to close the menu when they select the same page in which they are currently on.

I would also like to mention that my menu links look like this:

<a route-href="route:showcase" class="menu-item">Showcase</a>

I would like keep my links like this if at all possible because I like how the aurelia-router binds the href address automagically. I’m also open to any suggestions on alternative ways of doing this. If anyone has done something similar

2

I think you can use determineNavigationStrategy to handle this, just need to return ‘no-change’ to it (Guessing, not tested)

3

I just implemented a hacky way of solving my issue. I created a custom element called navigate-to-page-link.

navigate-to-page-link.ts

import { bindable, autoinject } from 'aurelia-framework';
import { Store } from 'aurelia-store';
import { State } from '@src/state/state';
import { MenuStateActions } from '../menu-state';

@autoinject()
export class NavigateToPageLink{
  @bindable route: string;
  @bindable name: string;

  constructor(private store: Store<State>){}

  closeMenu(){
    this.store.dispatch(MenuStateActions.close);
    return true;
  }
}

navigate-to-page-link.html

<template>
  <a route-href="route.bind: route" click.delegate="closeMenu()" class="menu-item">${name}</a>
</template>

So, basically I’m using the aurelia-store to open and close my menu. Also, I need to return true from the click.delegate method in order for the href link to navigate.

Inside my menu I use this element like so:

<require from="./navigate-to-page-link"></require>
<navigate-to-page-link route="home" name="Home"></navigate-to-page-link>