什么是导航守卫

在vue路由切换过程中对行为做个限制

1. 全局前置守卫

route.beforeEach((to, from, next)) => {
	// to是切换到的路由
	// from是正要离开的路由
	// next控制是否允许进入目标路由
	next(false);  //不允许
}

2. 路由级别的导航守卫

const routes = [
	{
		path: '/User',
		name: 'User',
		beforeEnter: (to, from, next) => {
			next(false);
		}
	},
]

3. 组件内部的导航守卫

在 User.vue组件中加入

export default {
	beforeRouterEnter(to, from, next) {
		next(false);
	}
}

4. 离开路由

beforeRouterLeave(to, from, next) {
	if(this.isconfirmed) {
		next();
	} else {
		if (confirm('确定要离开吗')) {
			next();
		}else {
			next(false);
		}
	}
}