Opening a link with middle mouse button click doesn't get intercepted to add the hashbang

[ronanpaixao]

When using hashbangs, if the anchor href is set to "/page", for example, it appears as <root>/page in the browser, but a left-click gets intercepted and <root>#!/page is loaded, preserving single-page-application functionality.

However, if the user clicks the link with the middle-mouse-button, the browser takes the href as-is and inserts in the new page/tab, without the hashbang, therefore the page is broken.

A simple example is when serving the app from the simplest servers, like gulp serve. Assuming that the <root>/page directory doesn't exist, the response will be a plain text file:

Cannot GET /page

Note: this is related to this StackOverflow question.

[ronanpaixao]

A simple workaround is changing all hrefs manually to #!/page, but that doesn't seem right.

[ozasadnyy]

I have the same issue, and this workaround doesn't work on a simple click.

[ozasadnyy]

I have found another solution:

function redirectLink(e) {
   page.redirect('/' + this.getAttribute('data-route'));
   e.preventDefault();
}

var routerLinks = document.querySelectorAll('a[href^="#!"]');
for (var i = 0; i < routerLinks.length; i++) {
   routerLinks[i].addEventListener('click', redirectLink, false);
}

Link example:

<a data-route="speakers" href="#!/speakers">Speakers</a>

I know it's not the best, but it works for me

[Boscop]

I'm also running into this. I would really appreciate if this could be fixed.. @ozasadnyy: I'm writing a polymer app, so I can't use your solution:

• when I call querySelectorAll() in my-app ready() callback, it's not guaranteed that all such links are constructed already, since pages are lazy loaded
• querySelectorAll() doesn't seem to work with the shadow DOM

It seems like the fix would be simple: This line has to be changed to:

var button = which(e);
if (button !== 1 && button !== 2) return;

Correct?