beforeRouteLeave
时间: 2023-12-09 13:06:57 浏览: 28
beforeRouteLeave is a navigation guard that is called before a route is left. It can be used to prevent the user from leaving a route if certain conditions are not met, or to prompt the user to confirm that they want to leave the route.
The beforeRouteLeave guard is typically used in combination with other navigation guards such as beforeRouteEnter and beforeRouteUpdate to ensure that the user is guided through the navigation process in a smooth and predictable manner.
Here is an example of how to use beforeRouteLeave in a Vue.js application:
```
<script>
export default {
beforeRouteLeave(to, from, next) {
// Check if the form is dirty (i.e. has unsaved changes)
if (this.formIsDirty) {
// Prompt the user to confirm that they want to leave
if (confirm('Are you sure you want to leave? Your changes will be lost.')) {
// Continue with the navigation
next();
} else {
// Stay on the current route
next(false);
}
} else {
// Continue with the navigation
next();
}
}
}
</script>
```
In this example, the beforeRouteLeave guard checks whether a form is dirty (i.e. has unsaved changes) and prompts the user to confirm that they want to leave the route if it is. If the user confirms, the navigation is allowed to proceed. If not, the navigation is cancelled and the user stays on the current route.
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)