Original link: dsx2016.com/?p=716

Wechat official account: Big Brother 2016

Requirements:

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

Implementation:

Use vue’s keep-alive include attribute to dynamically cache components, return unchanged from the details page, refresh the list page from other pages

Plus the list page to cache defines a data set in vuex

state:{
    pageListArr:[]
}
Copy the code

The name of the list page is proList, and the name of the detail page is proDetail. Only fields contained in PageListArr will be cached, such as pagelistarr.push (“proList”).

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

Ideas:

Before page initialization, get the name of the source page and the name of the page to load.

Use the global navigation guard here

router.beforeEach((to, from, next) = > {
  // Name -> from.name
  Name -> to.name
  // If the page to jump to is the list of goods, and not from the details of the goods back or jump to
  if(to.name===`proList`&&from.name! = =`proDetail`){
      pageListArr.push(`proList`)}// The source for the merchandise page returns the list page
  if(to.name===`proList`&&from.name===`proDetail`) {console.log('Do not do processing')}})Copy the code

Set cache when multiple list pages need to be cached, such as classified item list, active item list

It is necessary to determine whether pageListArr has cached some pages. Only the cached list page returned from the business details is not refreshed. The uncached list page still needs a new cache