vuejs - 浏览器返回时保留表单数据

Question

我不会说英语，我正在使用谷歌翻译。

表单提交后我的后退按钮出现问题，我使用 vuejs 显示内容并操作/验证表单，单击提交按钮被重定向到另一个操作。如果我在浏览器中单击返回 vuejs 会重新加载上一页，所以我丢失了表单的数据，如何在不使用 a 的情况下保留表单的数据，因为它是一个提交按钮？我认为在这种情况下该标签不适合我（我对其进行了测试，但它不起作用）。

Answer 1

HTML5 History API 似乎就是为此而生的。

当表单数据发生变化时，将其保存在历史记录中：

window.history.replaceState(state, "");

当（重新）加载历史记录中的页面加载时

window.history.state

或查看window.addEventListener("popstate", function(){...})

例如在我的列表视图中我使用：

常量方法 = { saveStateToHistory() { var state = window.history.state || {}; 如果（！状态[this.id]）{ 状态[this.id] = {}; } state[this.id].currentPage = this.currentPage; state[this.id].currentPerPage = this.currentPerPage; state[this.id].collFilter = this.collFilter; window.history.replaceState(state, ""); }, }; 常量手表 = { 当前页面（新数据）{ this.saveStateToHistory(); }, 当前每页（新数据）{ this.saveStateToHistory(); }, collFilter(newdata) { this.saveStateToHistory(); }, }; 函数创建（）{ var state = window.history.state || {}; var myState = state[this.id]; 如果（我的状态）{ this.currentPage = myState.currentPage; this.currentPerPage = myState.currentPerPage; this.collFilter = myState.collFilter; } };

在有人从列表视图中访问链接然后使用浏览器后退按钮返回列表视图后，这会保留当前页面和选定的过滤器。 我使用state[this.id] 来允许来自同一页面中不同组件的历史状态。