Vue uses History to record the data of the previous page

UI

demand

1. Enter the details page from the second page of the list page, the list page is still displayed on the second page when returning;
2. From the second page of the list page to the detail page, the filter condition of the list page still exists when returning.

<!--more-->

Technology options

1. Use vue-routercomponents, by this.$router.push({path: path, query: query});way of storing the 页码sum 选择条件as a parameter in the url, this method is feasible in the above UI design, but when the list page contains the tab component (the paging component is public), it will be due to push factors (Because push will open a new page) caused some problems (PS: may also be the reason for my technical ability), not realized.
2. Use History API(HTML5 starts to support), through the history.replaceStateway, will 页码be stored as a parameter in the url, will be 选择条件stored in the history (it is not clear where the data is specifically stored); through the location.hashway to obtain 页码; through the history.stateway to obtain the storage selection conditions.

Specific implementation-technology selection 2

switch

Add a switch (openroute) for the paging component, because the gray line needs to be online, in case there is a problem, there is only one page to be adjusted. code show as below:

<script>
  export default {
    props: {
      openroute: {
        type: Boolean,
        default: () => (true)
      }
    },
  }
</script>

Storage 页码and 选择条件retrieval in paging component页码

<script>
  export default {
    methods: {
      fetchData(page) {
          //请求参数
        let params = this.params;
        //请求页码
        let newPage;
        //openroute处理
        if (this.openroute) {
          //为url添上#page
          if (page) {
            history.replaceState(params.data, document.title, "#" + page);
          } else {
            if (history.state) {
              if (!history.state.key && location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
                if (JSON.stringify(history.state) !== JSON.stringify(params.data)) { //选择条件变更则请求第一页
                  history.replaceState(params.data, document.title, "#1");
                } else {
                  history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
                }
              } else {
                history.replaceState(params.data, document.title, "#1");
              }
            } else {
              if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
                history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
              } else {
                history.replaceState(params.data, document.title, "#1");
              }
            }
          }
          //获取url后面的#page
          if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
            newPage = Number(location.hash.split("#")[1]);
          } else {
            newPage = 1;
          }
        } else {
          newPage = page;
        }
        //请求数据，获得结果，传递给列表页面
      }
    }
  }
</script>

List page acquisition选择条件

At present, it may be due to the problem of framework design, and it is not Object.assignpossible to replace the initial variable by way of requesting data , so handle it first (stupid method, you guys have a solution, under the guidance of trouble, thank you ):

<script>
  export default {
    data() {
      return {
        form: {
          aaa: (history.state && history.state.aaa) ? history.state.aaa : null,
          bbb: (history.state && history.state.bbb) ? history.state.bbb : null,
          ccc: (history.state && history.state.ccc) ? history.state.ccc : null
        },
      };
    }
  };
</script>

It has been resolved that the initial variable does not need to be moved, and can be achieved in the following ways:

created(){
  //获取缓存的数据
  if (history.state) {
    Object.assign(this.form, history.state)
    if (this.form.key) {
      delete this.form.key
    }
  }
},

Here is a record: I thought that the created method was executed after the watch monitoring of the paging component, and later it was found to be misleading (because the Object.assign(true, this.form, history.state)data assignment was achieved by way of the past , but it did not succeed). Here is a small summary:

What is the difference between Object.assign (true, a, b); "and" Object.assign (a, b); "?

Conclusion: The former: changing a does not affect b; the latter: changing a affects b

Analysis (This article has source code analysis ( <font color = 'red'> Answer: How to associate source code in WebStorm? </ Font> ), great): https: //www.cnblogs.com/libin ...

FAQ

• The history.replaceStateway to use it is because: it will not push the changed url to the history stack, so it will not increase the number of steps of the back and forward operations;
• Use history.replaceStatemode, the size of the storable state cannot operate 640k;
• There may be browser compatibility issues, please review here: HTTPS: //caniuse.com/#feat=his ... .

Demo Or Source

Because it is a company project, there is currently no Demo or source code

Reference article

• Manipulating the browser history

This article is reproduced in: Ape 2048 Vue uses History to record the data of the previous page