Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Comments

@chasegiunta
Copy link

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.

@posva

This comment has been minimized.

@chasegiunta

This comment has been minimized.

@posva

This comment has been minimized.

@chasegiunta

This comment has been minimized.

@chasegiunta chasegiunta changed the title Hash mode ignores current query parameters on initial page load Hash mode places # at incorrect location in URL if current query parameters exist on page load Mar 24, 2018
@chasegiunta
Copy link
Author

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

@LinusBorg
Copy link
Member

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
Copy link

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#/

devin-brenton added a commit to devin-brenton/vue-router that referenced this issue Jun 11, 2018
…s#2125)

When navigating to a URL with a query string like myapp.com?foo=bar in hash mode, the hash is currently placed after the query string myapp.com?foo=bar#/

This fix correctly parses URLs with query strings so that the above URL will be myapp.com/#/?foo=bar after loading.
@pb-uk
Copy link

pb-uk commented Dec 9, 2018

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')) {

@vuejs vuejs deleted a comment from kolaente Dec 9, 2018
@vuejs vuejs deleted a comment from kolaente Dec 9, 2018
@vuejs vuejs deleted a comment from Akaryatrh Dec 9, 2018
@vuejs vuejs deleted a comment from kolaente Dec 9, 2018
@vuejs vuejs deleted a comment from hrq20170313 Dec 9, 2018
@vuejs vuejs deleted a comment from ShridharSagari Feb 25, 2019
@vuejs vuejs deleted a comment from ShrJoshi28 Feb 25, 2019
@vuejs vuejs deleted a comment from valtlfelipe Feb 25, 2019
@posva posva added the has PR label Feb 25, 2019
@chopfitzroy
Copy link

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
Copy link

@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
Copy link

SuiOni commented May 13, 2020

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

@vuejs vuejs deleted a comment from daundkarmangesh1109 May 13, 2020
@posva
Copy link
Member

posva commented May 13, 2020

Please see #2125 (comment)

@vuejs vuejs locked as resolved and limited conversation to collaborators May 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.