Detect if Refresh button is clicked in VUE

Question

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.

Did you look at https://stackoverflow.com/questions/5004978/check-if-page-gets-reloaded-or-refreshed-in-javascript? — Aseider, Apr 13 '18 at 09:25
@Aseider Yep. What I want to know if the buttons are clicked in a browser. Not just refreshing it :) — , Apr 13 '18 at 09: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, Apr 13 '18 at 09: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. — , Apr 13 '18 at 09: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, Apr 13 '18 at 09:48

Brian Lee · Answer 1 · 2021-01-22T15:29:47.090

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

edited Jan 22 '21 at 15:29

answered Apr 13 '18 at 10:17

Brian Lee

17,904
3
41
52

Where can I possibly insert this one? – Apr 16 '18 at 02:24
Your main entry point script could be a suitable place. I've updated the answer with more information. – Brian Lee Apr 16 '18 at 02:56
Given in the situation that I'm using Vue.js, where could it be better to insert it? – Apr 16 '18 at 03:08
How early in your app do you need it? Right before or after you create the Vue instance may be best, it's hard to say without context. – Brian Lee Apr 16 '18 at 03:13
after the whole data is loaded in the page, then if the user refresh the page, it should trigger a function. – Apr 16 '18 at 03:27
Put the above code in your `main.js` right before you create the root Vue instance. That way you can determine what to do immediately after the page reloads before anything else happens. – Brian Lee Apr 16 '18 at 03:43

Detect if Refresh button is clicked in VUE

1 Answers1