Should router.referrer store the previous page?

[chrisvfritz]

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]

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]

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]

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

[zuibunan]

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]

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]

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

[mitar]

Are there any workarounds in meantime?

[jscheller]

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]

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]

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.

[mitar]

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

[fractalf]

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

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

[meinenieuwland]

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]

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.