VUE - 导航守卫

挨踢女孩yyh

已于 2025-01-02 13:19:04 修改

阅读量360

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-11-24 11:04:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46191445/article/details/144004393

版权

什么是导航守卫

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

全局前置守卫

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

路由级别的导航守卫

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

组件内部的导航守卫

在 User.vue组件中加入

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

离开路由

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