Hash mode places # at incorrect location in URL if current query parameters exist on page load

[chasegiunta]

Version

3.0.1

Reproduction link

https://codesandbox.io/s/zlvz65rplp

Steps to reproduce

Navigate to myapp.com?foo=bar

What is expected?

Hash is appended before query parameters, to get the final result of myapp.com/#/?foo=bar

What is actually happening?

Hash is placed after parameters myapp.com?foo=bar#/ (also making the query parameters inaccessible with this.$route.query)

---

Note on codesandbox link - unable to place query parameter for initial URL in editor preview - please remove /#/ & append ?foo=bar

Running across this in an instance where user authentication is done outside our app, but client/user identifier is passed to our app in query parameter upon authorization.

[chasegiunta]

Edited title to better reflect core issue. I don't believe vue-router should try to support detecting query params before /#/

[LinusBorg]

Respectfully, I'm not sure we're on the same page. The only thing needed to reproduce this issue is importing vue-router & setting the correct path, which I did here:

Well, for starters, since you did not actually add the router to the app in new Vue, you missed that your router config was incorrect (but unrelated) to this issue.

I fixed this for you: https://codesandbox.io/s/5wpjknyy6x

[toymachiner62]

I'm also having this same issue when trying to use oauth with github. My callback url is set to https://myurl.com/#/ in github and when I get redirected it's still redirecting me to https://myurl.com?code=1234567890#/

[pb-uk]

Note that the workaround (see below) referenced in the other issue is unsatisfactory because

1. URLSearchParams does not have full cross-browser support
2. It still leaves the # after the query string for the rest of the session which is not acceptable to an end user

const query = (new URLSearchParams(window.location.search.substring(1)));
    if (query.has('code') && query.has('state')) {

[chopfitzroy]

Hey @posva,

Is it possible to get a link to the PR I brief look at outstanding PR's and could not find it, or am I misunderstanding the tag?

Cheers.

[ryanbillingsley]

@posva Maybe I am missing something, and I apologize if I am, but I forked @LinusBorg 's update to the sandbox, updated the versions of Vue to 2.6.11 and Vue-Router to 3.1.5 and also added a simple computed property that gets it's value from the query param and it still appears that the # is being placed after the query params and this.$route.query.foo is undefined.

https://codesandbox.io/s/vue-template-fxmc1

Going to https://fxmc1.csb.app/?foo=123, foo is undefined and the url becomes https://fxmc1.csb.app/?foo=123#/

I would expect it should be https://fxmc1.csb.app/#/?foo=123 and foo would be 123

[SuiOni]

Is there any news?
Facing the same issue.
Maybe setting the VueRouter to history mode, but that's not satisfactory.
Thanks 🙏

[posva]

Please see #2125 (comment)