时间戳

首页 > 解决方案 > 如果按下 F5，Vue.js 将重定向到新页面/组件

javascript - 如果按下 F5，Vue.js 将重定向到新页面/组件

问题描述

这里是 vue.js 的新手。我已经部署了一个包含 3 个组件的完整表单网站：Id、Form 和 End

一切都很好！我只在一个动作上挣扎。

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

当前场景是：/Id ---> /Form ---> F5 ---> 弹出确认离开页面--yes--> /Form (空白页)

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

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

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

但是当我尝试使用 window.onbeforeunload 和 this.$router.push('/Id') 的组合时，它似乎根本不起作用......或者我做错了。

这是我尝试添加 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: {
    ....
    }
   ....
   ...
 ...

标签： javascriptvue.jsonbeforeunload

解决方案

我通过使用本地存储解决了这个问题。

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

推荐阅读