In my Vue SPA, there is a component where I am using the beforeRouteLeave guard to prevent accidental page exits. However, within this component, I occasionally make an ajax request that, upon successful completion, needs to redirect the user to another location.
The issue arises when the ajax request succeeds and $router.push() tries to redirect the page but beforeRouteLeave prevents it from doing so.
Is there a way to temporarily override beforeRouteLeave and allow $router to perform the redirection?
<script>
methods:{
someAjaxCall()
{
axios.post('...')
.then(res=>{
this.$router.push({
name: 'route.name.here'
})
})
}
},
beforeRouteLeave(to, from, next){
next(window.confirm('Are you sure? Progress will be discarded.'))
},
</script>