Is there any way if we can check if the browser's refresh button is clicked, F5 is pressed or reload is clicked in Vue?

Any inputs or suggestions is appreciated.

Is there any way if we can check if the browser's refresh button is clicked, F5 is pressed or reload is clicked in Vue?

Any inputs or suggestions is appreciated.

• javascript
• vuejs2

Share Improve this question Follow edited Apr 13, 2018 at 9:17 asked Apr 13, 2018 at 9:10 user6632933user6632933 5

• Did you look at stackoverflow./questions/5004978/…? – Aseider Commented Apr 13, 2018 at 9:25
• @Aseider Yep. What I want to know if the buttons are clicked in a browser. Not just refreshing it :) – user6632933 Commented Apr 13, 2018 at 9:27
• As far as I know, you can't disable the default refresh action without returning false in the window.onbeforereload (which then fires the "Do you want to leave the page" pop up). However, you could just listen for the F5 key to be pressed, but this of course doesn't catch the reload button press... – Aseider Commented Apr 13, 2018 at 9:41
• @Aseider Mmmm. I'm trying to use it now, but where could it be good or possible to insert the event listener? Tried to insert it in mounted but does not work. – user6632933 Commented Apr 13, 2018 at 9:42
• Basically, you can setup the event listener whenever you want, as the window context is always given. But specifically in Vue, I would add the event listener in the created lifecycle hook, because then you already have access to the vm... – Aseider Commented Apr 13, 2018 at 9:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Update: As noted by @Paolo, performance.navigation is deprecated, use PerformanceNavigationTiming instead.

The Navigation Timing API, specifically PerformanceNavigation.type, will tell you how the page was accessed.

0 - TYPE_NAVIGATE

The page was accessed by following a link, a bookmark, a form submission, a script, or typing the URL in the address bar.

1 - TYPE_RELOAD

The page was accessed by clicking the Reload button or via the Location.reload() method.

2 - TYPE_BACK_FORWARD

The page was accessed by navigating into the history.

255 - TYPE_RESERVED

Any other way.

Example Usage:

// does the browser support the Navigation Timing API?
if (window.performance) {
  console.info("window.performance is supported");
}

// do something based on the navigation type...
switch(performance.navigation.type) {
  case 0:
    console.info("TYPE_NAVIGATE");
    break;
  case 1:
    console.info("TYPE_RELOAD");
    break;
  case 2:
    console.info("TYPE_BACK_FORWARD");
    break;
  case 255:
    console.info("255");
    break;
}