目录
一、问题
1.使用了 element-ui的 this.$notify进行消息提示,但提示是全局的,切换页面后依然存在,但我希望切换页面后消失。
let notify = _this.$notify({
title: "提示",
position: 'bottom-right',
message: "请填写交接单",
duration: 0,
onClose: () => {
_this.handOverFormNotify = null;
},
onClick:()=>{
},
});
二、解决方法
1.想通过监听路由来控制消息 显示和关闭,但是发现使用 $route 无法生效---子组件中监听route不可行。
2.思考后发现,Vue的生命周期函数就是记录组件(页面)的生命周期的
3.将取消消息通知的代码写在 beforeUnmount 或 unmounted 生命周期函数中就可以了。
beforeUnmount(对应Vue2中的beforeDestroy)中手动关闭
beforeUnmount(){
notify.close();
}
三、总结
1.页面需要在某个阶段做什么事情,直接写在对应的 生命周期函数 里就可以了。当你觉得某个事件处理的时机自己无法确定时,请先考虑生命周期函数。
2.创建好notify消息提示后,可以通过变量更改对应的属性。
如上面代码中 可以通过动态 notify.message="hello,please write handoverForm"修改提示的信息。
/*
希望对你有帮助!
如有错误,欢迎指正!
*/