Question

vue.js的新功能。我已经部署了一个完整的表单网站，其中包含3个组件：Id，Form和End

一切正常！我只想采取一个行动。

如果用户在组件/ Form上时按下F5以重新加载页面，则该页面将变为空白...这是非常糟糕的体验...我所做的是，我添加了一个window.onbeforeunload动作，它将显示一个弹出窗口，询问用户是否真的要离开该页面。如果用户回答“离开”，我希望页面重定向到/ Id。

当前方案是： / Id ---> / Form ---> F5 --->弹出确认休假页面-是-> / Form（空白页）

我想要的是： / Id ---> / Form ---> F5 --->弹出确认离开页面-是-> / Id

当我如下运行window.onbeforeunload时，它运行良好：

# data from @jezrael

df['rank'].mask((df['group'] == 'A') & df['rank'].isnull(), 'A+', inplace=True)

print(df)

   C group rank
0  7     A    a
1  8     A    b
2  9     A   A+
3  4     A   A+
4  2     B    c
5  3     C  NaN

但是当我尝试使用window.onbeforeunload和this。$ router.push（'/ Id'）的组合时，它似乎根本无法工作...或者我只是做错了。 >

这是我尝试添加此内容的方式。$ router.push（'/ Id'）：

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

Answer 1

好吧，我找到了一种使用以下代码在桌面上执行此操作的方法：

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";
    }
  }

但是我的手机仍然没有运气。...

当我在桌面上使用野生动物园时，效果很好，但是当我在移动设备上使用野生动物园时，我再次得到空白页。我认为移动设备不支持与window.onbeforeunload相关的某些内容？

Answer 2

我通过使用localstorage解决了该问题。

我没有将表单数据存储到本地存储中，而是重定向到主页，现在一切正常-https://www.npmjs.com/package/vue-localstorage

如果按F5键，则Vue.js重定向到新页面/组件

2 个答案: