注意: 暂未考虑用户手动刷新整个页面及多次replace跳转情况。
这种方案虽然能实现前进刷新后退缓存的效果,但仅仅只是简单实现。github有类似更好的方案,后续再补…
B为预期缓存页面: A->B->C时,A前进至B,B不缓存,若A->B->C->B,此时C后退到B,B缓存
理解钩子函数的执行顺序
-
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed; -
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated;
再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated ;
// 1. 修改app.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"></router-view>
// 除了v-if 也可以使用include参数实现
// 2. 修改路由 router/index.ts, 添加meta.keepAlive 需要缓存的页面设为True
{
path: '/all-Application',
name: 'AllApplication',
component: (