当自定义指令遇到keep-alive (vue3)

近期在实现权限指令时,出现了诡异的bug,在切换页面时,传入的权限值是混乱的,导致页面出现丢失按钮的情况。查了下发现是由于开启了keep-alive页面缓存导致的,因此需要在deactivated,activated这两个生命周期对权限指令绑定的值做重置处理

// ==========【 定义表格中操作列的权限 】==========
const initOperationColumnPermission = () => {
	return {
		userDetail: "button:userDetail",
		loginConsole: "button:loginConsole",
		editUser: "button:editUser",
		editPassword: "button:editPassword",
		checkUserFinanceLog: "button:checkUserFinanceLog",
		checkService: "button:checkService",
		setUserDiscount: "button:setUserDiscount",
		getUserMonthOrder: "button:getUserMonthOrder"
	};
};
const operationColumnPermission = ref<any>(initOperationColumnPermission());
// 重置自定义指令绑定的值,避免因为使用了keep-alive而导致数值混乱的问题
onDeactivated(() => {
	operationColumnPermission.value = {};
});
onActivated(() => {
	operationColumnPermission.value = initOperationColumnPermission();
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值