beforeRouteLeave 使用方式
时间: 2023-12-10 22:05:14 浏览: 56
beforeRouteLeave 是一个Vue Router中的守卫函数,用于在用户离开当前路由之前执行一些操作,例如提示用户是否要保存未保存的数据或者取消导航。beforeRouteLeave 守卫函数有三个参数:to, from 和 next,其中 to 表示用户要跳转的目标路由,from 表示用户当前所在的路由,next 表示是否要继续导航。
beforeRouteLeave 的使用方式如下:
```javascript
beforeRouteLeave (to, from, next) {
// 在用户离开当前路由之前执行一些操作
// 例如提示用户是否要保存未保存的数据或者取消导航
if (this.isFormDirty()) {
if (confirm('您有未保存的数据,是否取消导航?')) {
next(false) // 取消导航
} else {
next() // 继续导航
}
} else {
next() // 继续导航
}
}
```
在 beforeRouteLeave 中,可以通过调用 next 函数来控制是否要继续导航。如果调用 next(false),则表示取消导航,否则表示继续导航。同时,也可以通过在 beforeRouteLeave 中返回一个字符串,来当做导航守卫中的警告信息,例如:
```javascript
beforeRouteLeave (to, from, next) {
// 在用户离开当前路由之前执行一些操作
// 例如提示用户是否要保存未保存的数据或者取消导航
if (this.isFormDirty()) {
if (confirm('您有未保存的数据,是否取消导航?')) {
next(false) // 取消导航
} else {
next() // 继续导航
}
} else {
next() // 继续导航
}
},
beforeRouteLeave (to, from, next) {
if (this.isFormDirty()) {
next('您有未保存的数据,是否取消导航?') // 返回警告信息
} else {
next() // 继续导航
}
}
```
阅读全文