vue Back to previous page does not refresh the keep-alive

<--------------------------------- pretend divided -------------- ------------------->

keep-alive will not refresh the page when the page cache problem returns

Such functional blocks, which is a component, elected in time to jump to the next page

state before returning when the page is not saved
after return:

Solution

<keep-alive> Parcel dynamic components, component instances are cached inactive, rather than destroy them . And <transition>similar, <keep-alive>is an abstract component: it does not itself render a DOM element, it will not appear in the chain of parent components.

When the assembly <keep-alive>is switched within its activated and deactivated two hooking function life cycle will be performed corresponding to.

1. Routing Configuration

Add routing element configuration keepAlive property (random name) in the component routing needs to be cached, I set here is true

 {
	path: 'stepStore',
    component: stepSecond,
    meta: {
    keepAlive: 'true'
  }

2. Routing Options

 // keep-alive中为要缓存的 组件
 <keep-alive>
 	// keepAlive 为true走这个 
    <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 // keep 为false 走这个
 <router-view v-if="!$route.meta.keepAlive"></router-view>

3. Route guards
   using routing guard to change the meta content to achieve

beforeRouteLeave: (to, from, next) => {
  // 如果跳转的页面为/setting/stepStore 就将keepAlive设置为true就走缓存了组件那一步
  if (to.path === '/setting/stepStore') {
    to.meta.keepAlive = true
  } else {
  	// 否则keepAlive设为 false
    to.meta.keepAlive = false
  }
  next()
}

This is very useful in this code first!