The Vue keep alive list page cache details page returns to the previous page without refreshing, and locates to the previous location

Time:2020-2-18

Original link: HTTPS: / / dsx2016. COM /? P = 716

WeChat official account: Senior brother 2016

Demand:

Browse the product list page, enter the product details, click to return to the previous browsing location

The Vue keep alive list page cache details page returns to the previous page without refreshing, and locates to the previous location

Realization:

UsevueOfkeep-aliveOfincludeProperty to dynamically cache components, return unchanged from details page, and refresh when entering list page from other pages

Add the list page to be cached to define a dataset in thevuex

state:{
    pageListArr:[]
}

List pagenamebyproList, on the details pagenamebyproDetailOnlyPageListArrThe included fields will be cached, such aspageListArr.push("proList")

<keep-alive :include="pageListArr">
   <router-view></router-view>
</keep-alive>

Train of thought:

Before page initialization, get thenameAnd thename.

The Vue keep alive list page cache details page returns to the previous page without refreshing, and locates to the previous location

Use global navigation guard here

router.beforeEach((to, from, next) => {
  //Source page name - > from.name
  //Go to page name - > to. Name
  //If the page to jump is a list of products, and it is not returned or jumped from the product details
  if(to.name===`proList`&&from.name!==`proDetail`){
      pageListArr.push(`proList`)
  }
  //Source: product page return to list page
  if(to.name===`proList`&&from.name===`proDetail`){
      Console. Log (` do not process')
  }
})

When multiple different list pages need to be cached, such as classified goods list and active goods list

Need to judge firstpageListArrIf some pages have been cached, only the cached list pages returned from business details are not refreshed, and the uncached list pages still need to be cached

The Vue keep alive list page cache details page returns to the previous page without refreshing, and locates to the previous location