Vue all pages forward request data back do not request data to maintain the previous browsing status, including sliding position, etc.

ask whether the god can request data for the forward of the page, back without requesting data, and show the previously requested data, including scrolling to the location of the page before the jump. There will be a variety of bug, failures on the mobile end of the online keep-alive solution, and there will be no problem in the pc trial.
requirement is to record the location of the last page point, including the location to which the paging list slides, tab, etc.

Javascript
Apr.02,2021

how to decide whether to go back to the page or click the menu to go to the page, or not to refresh it as long as you enter it for the first time

watch snooping $route. This idea can solve your needs

save the information you need to save in localstorage, take a look at it when the page is loaded, and use

in localstorage.

I have used several projects for keep-alive and there is no bug.

< hr >

I think if the project uses keep-alive, we should pay attention to several problems and put

  1. reset of page state, especially form
  2. when I found a problem with three-level routing, the third-level push of this module to the third-level page of another module, html did not change. It was found that it was keep-alive. I was keep-alive of the entire project. For more information, please see my question in github:
    3. .

https://github.com/vuejs/vue-.
my solution is that routing only uses level 2, but in order for url to look good, url shows level 3

The advantage of

is that it can save the page state. As far as my project is concerned,
is like some home pages, category pages, personal center pages, and so on. Page request events that require only one request can be placed in created

.

with regard to the details of the list said by the landlord, my general practice is to put the request function in beforeRouteEnter,
and then judge whether to reload the first page according to the conditions:
! list.length | | from.name! = 'xxxx'
(because my project runs in Wechat's browser, list judgment is made in order to solve the problem. If the user refreshes the page in the details page and then returns to the list page, the list page is empty)

I encountered two situations about saving the page scroll location:

  1. my list page uses better-scroll,. My movement from the details page to the list page is automatically reserved, so there is no need for special handling
    2. The
  2. list page does not need to be paged, so overflow-y:auto, is used. This is not reserved for scrolling, so what I do is:

vue section: 

beforeRouteEnter(to, from, next) {
  next(vm => {
    if (!vm.hasLoadData) {
      vm.getList()
    }

    if (vm.scrollTop && vm.$refs.scrollBody) {
      vm.$refs.scrollBody.scrollTop = vm.scrollTop        //    
    }
  })
},
beforeRouteLeave(to, from, next) {
  this.scrollTop = this.$refs.scrollBody.scrollTop        //    
  next()
},
data() {
  return {
    scrollTop: 0,   //  
  }
},

html: 

...
<div ref="scrollBody"><!-- height: 100vh; overflow-y: auto; -->
    
</div>
...

above, if you have any questions, please discuss more

Previous: How does vue eliminate the annoyance of clicking the "back" button?

Next: How to merge element table header

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu