How to detect page is refreshed on vue.js?

@addison 

One way to detect if a page is being refreshed on Vue.js is by using the beforeunload event listener. This event is triggered when the user tries to navigate away from the page, either by refreshing it or closing the tab/window.

You can add a listener for the beforeunload event in your Vue component like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

export default {
  created() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  beforeDestroy() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  },
  methods: {
    handleBeforeUnload(event) {
      // Do something when page is being refreshed
      console.log('Page is being refreshed');
    }
  }
}

In the handleBeforeUnload method, you can perform any action you want when the page is being refreshed. This could be showing a confirmation message to the user, saving some data, or performing any other necessary logic.

Remember to also remove the event listener in the beforeDestroy lifecycle hook to clean up the event handling when the component is destroyed.

By using the beforeunload event listener, you can easily detect when a page is being refreshed on Vue.js and take appropriate action as needed.