vue3监听页面路由离开,进行提示操作
vue3监听页面路由离开,进行操作
·
项目中用的监听页面路由离开时,进行用户提示相关操作。示例如下:
主要用到 vue-router
的 onBeforeRouteLeave
方法
import { onBeforeRouteLeave } from 'vue-router'
// 监听路由离开
onBeforeRouteLeave((to, from, next) => {
if (unref(isHomeEdit)) {
// 编辑状态离开时
ElMessageBox.confirm('', '编辑内容尚未保存,是否保存?', {
confirmButtonText: '保存',
cancelButtonText: '取消',
type: 'info',
center: true,
customClass: 'toggle-project-modal',
beforeClose: async (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true
await sendSubmit()
instance.confirmButtonLoading = false
done()
} else {
done()
}
}
})
.then(async () => {
next()
})
.catch(() => {
cancelHomeEdit()
next()
})
} else {
next()
}
})
更多推荐
已为社区贡献10条内容
所有评论(0)