在项目开发中总有一些特殊需求,比如只允许数据加载后才进行页面操作,此时我们就可以利用vue-router提供的beforeRouteLeave来实现。
示例
default default {
data() {
return {
isLoading: false
}
},
methods: {
async loadData() {
this.isLoading = false;
return new Promise((resolve, reject) => {
setTimeout(() => {
this.isLoading = false;
}, 5000)
})
}
},
// 监听路由即将离开
beforeRouteLeave(to, from, next) {
if (this.isLoading) { // 当数据还在加载时,阻止路由跳转
next(false)
} else {
next();
}
}
}