vue 返回上一页 页面不刷新 keep-alive

<---------------------------------假装分割--------------------------------->

keep-alive 将页面缓存 返回时页面不刷新问题

这样一些功能模块，是一个组件，当选中的时候跳转到下一个页面去

返回的时候页面没有保存之前的状态
返回后：

解决办法

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

1. 路由配置

在需要缓存的组件路由中 添加路由元 配置 keepAlive属性(名字随意)， 我这儿 设置值为true

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

2. 路由选项

 // 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. 路由守卫
   使用路由守卫 来更改 meta 的内容来实现

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()
}

这个非常有用，先码在这！