Question

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

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

Answer 1

似乎为此使用了HTML5历史记录API。

更改表单数据时，请使用以下命令将其保存在历史记录中：

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

并且当（重新）使用历史记录从页面加载时

window.history.state

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

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

const methods = {
       saveStateToHistory() {
               var state = window.history.state || {};
               if( ! state[this.id]) {
                       state[this.id] = {};
               }
               state[this.id].currentPage = this.currentPage;
               state[this.id].currentPerPage = this.currentPerPage;
               state[this.id].collFilter = this.collFilter;
               window.history.replaceState(state, "");
       },
 };

 const watch = {
       currentPage(newdata) {
               this.saveStateToHistory();
       },
       currentPerPage(newdata) {
               this.saveStateToHistory();
       },
       collFilter(newdata) {
               this.saveStateToHistory();
       },
 };

 function created() {
       var state = window.history.state || {};
       var myState = state[this.id];
       if(myState) {
               this.currentPage = myState.currentPage;
               this.currentPerPage = myState.currentPerPage;
               this.collFilter = myState.collFilter;
       }
 };

在某人从列表视图中找到链接，然后使用浏览器的后退按钮返回列表视图之后，这将保留当前页面和选定的筛选器。我正在使用state[this.id]允许同一页面中不同组件的历史记录状态。

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

1 个答案: