Vue returns to the previous page without refreshing the page / Vue caches the page

problem ：

vue Within the framework of , When returning to the previous page （this.$router.go(-1）) , By default, the previous page will execute the life cycle again （ Is refreshed ）.

The desired effect ：

Return to the previous page without refreshing the page .

resolvent ：

Cache the page of the previous page , Let it exist , Do not re execute the lifecycle when it is displayed again ;

Using technology ：keep-alive（vue Built in components of ）

router Routing configuration router/index.js

const routes = [
 {
    
    path: '/pageA',
    name: 'pageA',
    component: () => import('../views/pageA.vue'),
    meta: {
    
      title: ' I'm the page A',
      keepAlive: false //  No need to cache 
    }
  },
  {
    
    path: '/pageB',
    name: 'pageB',
    component: () => import('../views/pageB.vue'),
    meta: {
    
      title: ' My page B',
      keepAlive: true //  Cache required 
    }
  }
  ]
  const router = new VueRouter({
    
  routes
})

Vue.use(VueRouter)

template Template code ( Distribute routing pages )：

<template>
  <div id="app">
	<!--  Cached pages , cache $route.meta.keepAlive by true The components of  -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <!--  Pages not cached , Don't cache $route.meta.keepAlive by false The components of  -->
      <router-view v-if="!$route.meta.keepAlive"></router-view>
   </div>
</template>

explain ： By keep-alive Dynamic components of the package （ page ）, When component is inactive , Will cache their component instances , Instead of destroying them .

Be careful （ Added hook function ）：

There are two more hook functions in the cache page , Triggered when used to show and hide the cached page

// activated Is the hook function after page activation , As soon as you enter the page, it will trigger 
 activated () {
    
  //  Display time 
    console.log(1)
  },
  // deactivated  The hook function that leaves the page , As soon as you leave the page 
  deactivated () {
    
    //  When not shown 
    console.log(2)
  },