Links containing hash anchor tags in URL not supported

[aidesigner]

Aurelia router does not seem to allow a URL that has a link location suffix like http://localhost:3000/products#middle. Note I assumed it was mandatory to implemented pushState (http://aurelia.io/docs.html#configuring-push-state), which eliminated the starting # in the URL. Below are some cases that indicate the #middle is confusing the router.

Experiments (PASS) Enter browser URL http://localhost:3000/products then add #middle -Probably because router is not re-invoked for #middle addition.

(FAIL) Follow a anchor href link to http://localhost:3000/products#middle Chrome console: ERROR [app-router] Error: Route not found: /products#middle(…) -Primary issue which prevents building links for say a "Table of Contents".

(FAIL) Enter browser URL http://localhost:3000/products#middle -Brings up products page correctly, but at the top of the document. This is probably related to asynchronous page load. Perhaps a javascript LoadDone function will have to search for hash and then scroll to anchor. It would be nice if Aurelia magically made this work as well.

[bryanrsmith]

I think what we should do for this is pass the hash as a separate property to the route handler so it can be exposed to activated modules as needed. We need to be able to provide an object to the route handler anyways for #243.

[silverbucket]

+1

[matthewca]

+1

[andrewflierman]

+1

[juanpujol]

👍

[INullable]

I'm trying to deep link to Bootstrap tabs in my page. Tried taking the tab name hash tag as an optional parameter to my route:

route: ["view", "view/:tab"]

But the router doesn't give me the tab parameter value in the activate() method of my component if I deep link to a tab like:

/view/#details

Would be good to fix this issue.

[shaunluttin]

We're trying to handle a successful OpenID Connect authentication response. Is this bug also responsible for preventing the Aurelia Router from handling the following?

  HTTP/1.1 302 Found
  Location: https://client.example.org/callback/#
    access_token=SlAV32hkKG
    &token_type=bearer
    &id_token=eyJ0 ... NiJ9.eyJ1c ... I6IjIifX0.DeWt4Qu ... ZXso
    &expires_in=3600
    &state=af0ifjsldkj

It seems that the Aurelia router does not like the /# at the end, even when we configure it as follows:

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

Is there are workaround? We asked a related question here: http://stackoverflow.com/questions/41528624/handle-a-successful-openid-connect-authorization-response-in-safari-9

[bsrdjan]

following configuration works but without pushState:

<a href="#/home/controls/buttons">Buttons</a>

<h2 id="/home/controls/buttons">Buttons</h2>

the test url is #/home/controls and the anchor is /buttons. Works both when clicking the link and when /buttons added in address bar: http://localhost:9000/#/home/controls/buttons

[Mobe91]

How should hash anchor links generelly work with pushState and a base-tag? A simple anchor link in /app/view1 like

<a href="#anchor1">...</a>

will never work with the suggested pushState approach because this approach also requires a <base> tag in the head. For this anchor to work, it needs to be prefixed with the current path, i.e. /app/view1#anchor1. Does Aurelia provide any facilities to rewrite such anchor links correctly? What is the best practice to deal with anchor links?

[sboyd]

@bryanrsmith do you happen to know if there's a work around in place for the issue @Mobe91 is describing?

[sboyd]

So @Mobe91 I ended up doing the following, though I'm not sure it'll work for your case it worked well for me.

In my viewmodel I added this funciton scrollToElement(elementId){ document.getElementById(elementId).scrollIntoView(); }

In the view I removed my href and replaced it with this. click.delegate="scrollToElement('app-highlights')"

Hope this helps someone --Steve

[nmocruz]

this also maybe affects https://github.com/shaunluttin/aurelia-open-id-connect/issues/30

[dkent600]

wow, this has been open for 5.5 years :-)