When the vue browser is closed, it prompts whether to close it

As single-page applications become more and more popular, Vue, as a mainstream front-end framework, has been widely used. However, it is a more difficult problem to implement prompts when the browser is closed in the application.

Normally, when the browser is closed, users are likely to mistakenly operate or close all browser tabs. At this time, if we have unsaved data or other data that needs to be cleaned up in the application, it will cause some problems.

In order to solve this problem, we need to add a prompt layer to the Vue application. When the user tries to close the browser tab, they will receive a prompt asking if they are sure to close it.

Vue provides the browser close event beforeunload, which is triggered when the browser closes or refreshes the page. We can listen to the beforeunload event of the page in Vue's life cycle function:

created() {
  window.addEventListener('beforeunload', this.handleBeforeunload)
},
beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleBeforeunload)
},
methods: {
  handleBeforeunload(event) {
    event.returnValue = '您确定要关闭该页面吗？'
  }
}

In the above code, we add event listening in the created function. When the browser closes or refreshes the page, the handleBeforeunload function will be triggered. In this function, we use event.returnValue to return the prompt information to implement the prompt when the application is closed.

It should be noted that if our Vue application controls the browser closing event together with other JS scripts, conflicts may occur. At this time, a better solution is to use vue-router guard to control routing prompts in more detail.

In vue-router, we can use the beforeRouteLeave guard, which is triggered before the route leaves. We can decide whether to prompt based on whether the current route and the target route match, and whether the user has performed certain operations:

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您确定要离开该页面吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

In the above code, we first determine whether there is unsaved data (i.e. formDirty variable) , if it exists, display the prompt box and decide whether to leave the current page according to the user's choice. If it does not exist, go directly to the next route.

In short, whether we use beforeunload in a Vue application or beforeRouteLeave in vue-router, we can use simple code to realize the prompt when the browser is closed, while enhancing the experience and avoiding data loss. or other questions.

The above is the detailed content of When the vue browser is closed, it prompts whether to close it. For more information, please follow other related articles on the PHP Chinese website!