vue 路由按需 keep-alive

situation

一个常见的的场景，

主页 –>前进列表页–>前进详情页，详情页 –>返回主页 –>返回列表页

我们希望，

从详情页 –>返回列表页的时候页面的状态是缓存，不用重新请求数据，提升用户体验。

从列表页 –>返回主页的时候页面，注销掉列表页，以在进入不同的列表页的时候，获取最新的数据。

task

keep-alivekeep-alive是Vue提供的一个抽象组件，主要用于保留组件状态或避免重新渲染。但是 keep-alive会把其包裹的所有组件都缓存起来。

action

我们把需求分解成2步来实现

1.把需要缓存和不需要缓存的视图组件区分开

思路如下图:

写2个 router-view 出口

<keep-alive>
 <!-- 需要缓存的视图组件 -->
 <router-view v-if="$route.meta.keepAlive">
 </router-view>
</keep-alive>

<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>

在Router里定义好需要缓存的视图组件

new Router({
 routes: [
 {
 path: '/',
 name: 'index',
 component: () => import('./views/keep-alive/index.vue'),
 meta: {
 deepth: 0.5
 }
 },
 {
 path: '/list',
 name: 'list',
 component: () => import('./views/keep-alive/list.vue'),
 meta: {
 deepth: 1
 keepAlive: true //需要被缓存
 }
 },
 {
 path: '/detail',
 name: 'detail',
 component: () => import('./views/keep-alive/detail.vue'),
 meta: {
 deepth: 2
 }
 }
 ]
})

2.按需keep-alive

官方文档提供的api入手：

keep-alive组件如果设置了 include ，就只有和 include 匹配的组件会被缓存，

所以思路就是，动态修改 include 数组来实现按需缓存。

<keep-alive :include="include">
 <!-- 需要缓存的视图组件 -->
 <router-view v-if="$route.meta.keepAlive">
 </router-view>
</keep-alive>

<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>

让我们在app.vue里监听路由的变化,

export default {
 name: "app",
 data: () => ({
 include: []
 }),
 watch: {
 $route(to, from) {
 //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
 if (to.meta.keepAlive) {
 !this.include.includes(to.name) && this.include.push(to.name);
 }
 //如果 要 form(离开) 的页面是 keepAlive缓存的，
 //再根据 deepth 来判断是前进还是后退
 //如果是后退
 if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
 var index = this.include.indexOf(from.name);
 index !== -1 && this.include.splice(index, 1);
 }
 }
 }
};

需要注意的是