Vue框架的keep-alive 缓存机制

• 利用Vue的keep-alive 缓存机制实现页面 "前进刷新，后退不刷新"效果
• 所以我的代码为
• 关于keep-alive 的生命周期钩子函数

利用Vue的keep-alive 缓存机制实现页面 "前进刷新，后退不刷新"效果

1. 在 router 中将需要不刷新的页面 加上meta属性

{
path: '/index',
component: index,
meta: {
keepAlive: true,
isBack: false,
}
},

1. 在 App.vue中 将需要缓存的页面加以判断

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

1. 在index页面中添加路由守卫beforeRouteEnter 中判断当前页面是否为要缓存的页面

beforeRouteEnter(to, from, next) {
// to: 为当前页面路由
// from: 为从那一个页面跳转过来的路由
if(to.name=='index '){
// 意思为，如果to的路由为 当前需要缓存页面的路由，就为 true,  需要缓存，即不刷新，false就不需要缓存，即刷新
to.meta.isBack=true;
}
next();
},

1. keep-alive开始后，会多出 activated 和deactivated 两个钩子函数，切记 如果没开启 keep-alive 是不会执行这两个钩子函数的。利用activated钩子特性，将不需要缓存的页面关闭，即可实现前进刷新，后退不刷新

activated() {
this.$route.meta.isBack=false
},

所以我的代码为

// router
{
path: '/index',
component: index,
meta: {
keepAlive: true,
isBack: false,
}
},

// App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

// index页面
beforeRouteEnter(to, from, next) {
if(to.name=='index'){
to.meta.isBack=true;
}
next();
},
activated() {
this.$route.meta.isBack=false
},

• 需要特别注意的是：使用keep-alive和不使用keep-alive，生命周期钩子函数执行流程不一样。

关于keep-alive 的生命周期钩子函数

• 不使用keep-alive

  => 就是正常的生命周期钩子函数
  => created – mounted – updated – destroyed

• 使用keep-alive但没有缓存页面的时候

  => beforeRouteEnter – created – mounted – activated – deactivated
  // updated钩子函数也可以正常使用，数据改变时会继续触发updated
  // beforeDestroy，destroyed 钩子函数将不执行 由deactivated钩子函数替代，如有销毁的实例可以放在 deactivated 钩子

• 使用keep-alive缓存页面的时候
  => beforeRouteEnter – activated – deactivated

Ps: 以上都是总结得出，可能会出现错误。请谨慎用之
 
 
// 一个月薪2500的狗头，只能记录+分享它的狗生了…