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 · 15 comments
Open

Should router.referrer store the previous page? #883

chrisvfritz opened this issue Nov 7, 2016 · 15 comments
Labels
feature request group[current route information] Issues regarding current route information that is currently missing

Comments

@chrisvfritz
Copy link
Collaborator

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

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 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
Collaborator Author

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

@zuibunan
Copy link

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

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

@mitar
Copy link

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

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

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

  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
@posva posva added the group[current route information] Issues regarding current route information that is currently missing label Mar 26, 2019
@mitar
Copy link

mitar commented Nov 21, 2019

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

@fractalf
Copy link

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

@obnijnil
Copy link

Still looking for $router.referer or $route.referer...

@meinenieuwland
Copy link

meinenieuwland commented Aug 9, 2022

I added this hacky solution in our Nuxt project:

router.beforeEach((to, from, next) => {
    if (process.client) {
      Object.defineProperty(
        document,
        'referrer',
        {
          configurable: true,
          get: () => {
            return from.name
              ? window.location.origin + from.path
              : ''
          },
        }
      )
    }

    next()
})

@nandi95
Copy link

nandi95 commented Sep 8, 2022

This would be also helpful to determine if a user has just visited the website or already navigated within. For example a back button would navigate to the landing page if the previous route isn't set or to the previous page if it is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request group[current route information] Issues regarding current route information that is currently missing
Projects
3.x
  
Todo
Longterm
Design proposals + discussion (high p...
Development

No branches or pull requests