beforeRouteLeave is a navigation guard in Vue.js used to intercept before leaving the route. It is mainly used to prevent users from leaving the page without saving changes, pop-up confirmation prompts, or cleaning up component side effects. It is suitable for form editing pages, data loading and cleaning side effects scenarios. When used, it is implemented through export default { beforeRouteLeave(to, from, next) } or onBeforeRouteLeave of the combined API. The parameter to represents the target route, from represents the current route, and next controls whether to release navigation. Notes include avoiding abuse affecting the experience, judging trigger conditions in combination with form status, and ensuring that next() is called correctly to prevent a dead loop.

In the Vue.js project, beforeRouteLeave is a very practical navigation guard that allows you to make some judgments or processing before leaving the current route. Simply put, its function is to "give you a chance to intervene before the user wants to jump to other pages."

The most common purpose is to prevent users from leaving the page without saving, pop up confirmation prompts, or clean up some component-related status.

When to use beforeRouteLeave?

This hook is suitable for the following situations:

• Form editing page: The user has entered the content but has not saved it. Remind when he wants to leave
• Data is loading: For example, the asynchronous request has not been completed yet, and I do not want the user to leave early
• Clean up side effects: such as clearing timers, unsubscribe, etc.

It does not affect the behavior of the page itself, but only provides a "intercept" mechanism where you can choose to release or block this navigation.

How to write beforeRouteLeave hook?

In the Vue single file component, you only need to add this function to setup() or script part:

 export default {
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('Are you sure you want to leave? The current content may not be saved!')
    if (answer) {
      next()
    } else {
      next(false)
    }
  }
}

In the example above, when the user tries to leave this page, a confirmation box will pop up:

• If you click "OK", call next() to release
• If you click "Cancel", call next(false) to prevent jump

The parameters are as follows:

• to : Target routing object
• from : The currently leaving route object
• next : Method to control whether to continue navigation

Common precautions and tips

• Don't abuse : Frequent pop-ups will affect the user experience and only use it if necessary
• Combined with form status : You can monitor whether the data has changed, and the confirmation prompt will be triggered only if there is any change.
• Avoid dead loops : Make sure next() is called correctly, otherwise the page will be stuck
• Writing in a combination API : If you are using Composition API and setup() , you can implement it through onBeforeRouteLeave :

 import { onBeforeRouteLeave } from 'vue-router'

export default {
  setup() {
    onBeforeRouteLeave((to, from, next) => {
      if (!isSaved.value) {
        const ok = confirm('The content is not saved, sure to leave?')
        next(ok)
      } else {
        next()
      }
    })
  }
}

Basically that's it. beforeRouteLeave is not complicated, but it is easily overlooked or misused. Just remember that it is the "last line of defense before leaving" and is used reasonably in the right scenario, it can improve user experience and program robustness.

The above is the detailed content of How to use the beforeRouteLeave guard?. For more information, please follow other related articles on the PHP Chinese website!