Vue.js redirect to a new page/component if F5 is pressed

Question

New to vue.js here. I have deployed a complete form website with 3 components : Id, Form and End

Everything is working really well! I am only struggling with one action.

If a user hits F5 to reload the page when he is on the component /Form, the page goes blank... which is a pretty bad experience... What I have done is, I added a window.onbeforeunload action, it will display a popup asking if the user really wants to leave the page. If user answers "leave", I want the page to redirect to /Id.

Current Scenario is : /Id ---> /Form ---> F5 ---> pop up confirm leave page --yes--> /Form (blank page)

What I would like is : /Id ---> /Form ---> F5 ---> pop up confirm leave page --yes--> /Id

When I run window.onbeforeunload as below, it works well :

 window.onbeforeunload = function(){ return "Are you sure?"; } 

But when I try to use the combination of window.onbeforeunload and this.$router.push('/Id'), it does not seem to work at all... or I am just doing it wrong.

Here is how I tried to add this.$router.push('/Id') :

 <script> import axios from 'axios' var answer ='' window.onbeforeunload = function(){ var answer = confirm('Are you sure?'); if (answer == 'true'){ this.$router.push('/Id') } return answer; } export default { data () { return { form: { .... }, } }, methods: { .... } .... ... ... 

Answer 1

Ok I found a way to do it on my desktop by using the following code :

 var is_asked = false; window.onbeforeunload = function (ev) { var e = ev || window.event; window.focus(); if (!is_asked){ is_asked = true; var showstr = "CUSTOM_MESSAGE"; if (e) { //for ie and firefox e.returnValue = showstr; } return showstr; //for safari and chrome } }; window.onfocus = function (ev){ if (is_asked){ window.location.href = "http://localhost:8080"; } } 

But still no luck on my mobile....

when I use safari on my desktop it works well but when I use safari on mobile I get a blank page again. I think there is something related to window.onbeforeunload not supported by mobile?

Answer 2

I fixed the issue by using localstorage.

Instead of redirecting to the Home page I stored the form data on the localstorage and everything is fine now - https://www.npmjs.com/package/vue-localstorage