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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Should router.referrer store the previous page? #883

Open
chrisvfritz opened this issue Nov 7, 2016 · 12 comments
Open

Should router.referrer store the previous page? #883

chrisvfritz opened this issue Nov 7, 2016 · 12 comments

Comments

@chrisvfritz
Copy link
Member

@chrisvfritz chrisvfritz commented Nov 7, 2016

There are times when it's useful to peek at what the previous page was. With normal page navigation, document.referrer stores the previous URL, but the HTML5 History API doesn't update that value unfortunately. 馃槥 Would it be desirable to access the referrer on router.referrer? The getter might look something like this:

return document.referrer || this.$router.internalHistory[0]

As you can see, this would also require keeping a stack of previous pages, maybe just 1 level deep by default. Later, perhaps an option could be added to specify the max stack height.

@blake-newman
Copy link
Member

@blake-newman blake-newman commented Nov 7, 2016

I would agree this is very useful and alot of use cases.

Had this scenario previously on a micro application that would reroute upon finishing.

@LinusBorg
Copy link
Member

@LinusBorg LinusBorg commented Nov 8, 2016

Probably also useful to determine weither to use a "forward" or "backward" transition - if the new path is the same as the referrer, user probably clicked the back button, so we want to use a "backward" transition, e.g. slideInLeft instead of slideInRight.

For that, the referrer would have to be updated after the route switch has been completely done.

@chrisvfritz
Copy link
Member Author

@chrisvfritz chrisvfritz commented Nov 8, 2016

@LinusBorg Ohh, I didn't even think of that. That's nice.

@zuibunan
Copy link

@zuibunan zuibunan commented Dec 3, 2016

Probably also useful to determine weither to use a "forward" or "backward" transition - if the new path is the same as the referrer, user probably clicked the back button, so we want to use a "backward" transition, e.g. slideInLeft instead of slideInRight.

user probably clicked the back button
user probably clicked the back button
user probably clicked the back button

Not enough to determine weither to use a "forward" or "backward" transition

@LinusBorg
Copy link
Member

@LinusBorg LinusBorg commented Dec 3, 2016

Weither or not that is enough depends on the developers intend for this part of his app.

And it's better than nothing, considering that there simply is no way to detect a back-button click 100%reliably. Browser APIs don't reveal that info.

@tianbaolin
Copy link

@tianbaolin tianbaolin commented Mar 14, 2017

this is very useful,I search the method so I find this issue.

@mitar
Copy link

@mitar mitar commented Oct 31, 2017

Are there any workarounds in meantime?

@posva posva added this to Todo in 3.x Apr 8, 2018
@jscheller
Copy link

@jscheller jscheller commented Jun 8, 2018

This would definitely be a useful addition in 3.0.

If there are any recent alternatives for inspecting the previous route, they'd be super valuable.

@Jinjiang
Copy link
Member

@Jinjiang Jinjiang commented Jun 10, 2018

I think the user history is just the history, not the route structure at all. The history is a line but the route structure under the line is like a tree or even more complicated net.
So it would be better if we track the history stack but decide slideInLeft/slideInRight by the route structure IMO.
Btw, there should be a third way to nav besides slideInLeft and slideInRight which often slides from the bottom like a modal/dialog. It's out of the route tree but may be called by any of the tree pages.
Thanks.

@wojciech-bak
Copy link

@wojciech-bak wojciech-bak commented Jan 10, 2019

  1. Vue-router provides two methods:beforeEach and afterEach, both of them allows me to get from and to route data.
  2. In beforeEach method I just added window.previousUrl = from.path to make the value accessible globally.
  3. When I have to go back in URLs history, it could be something like $router.replace(window.previousUrl).

Perhaps this solution is not perfect (because of global variable usage), but it works fine for me. Obviously, you can edit the beforeEach logic freely e.g. to save complete user's history.

@posva posva added this to Design proposals + discussion (high prio, high complex) in Longterm Mar 26, 2019
@mitar
Copy link

@mitar mitar commented Nov 21, 2019

I needed this feature again, so I made this simple Vue plugin.

@fractalf
Copy link

@fractalf fractalf commented Jan 13, 2020

@mitar Thank you so much for this eligant mixin! I was kind of surprised something like this wasn't already in the router-core.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
3.x
  
Todo
Longterm
Design proposals + discussion (high p...
Linked pull requests

Successfully merging a pull request may close this issue.

None yet