使用vue-router阻止返回上一页

2,253 阅读1分钟

在项目开发中总有一些特殊需求,比如只允许数据加载后才进行页面操作,此时我们就可以利用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();
        }
    }
}