vue项目按需使用keep-alive

---

需求

list 页面做缓存 add/edit 页面不做缓存 detail 页面不做缓存 …

前人法子

<keep-alive> <!-- 需要缓存 --> <router-view :include="include" v-if="$route.meta.keepAlive" /> </keep-alive> <!-- 不需要缓存 --> <router-view v-if="!$route.meta.keepAlive" /> 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); } }, }, };

粗暴法子

<transition name="move" mode="out-in"> <keep-alive> <!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> </transition> <!-- 不需要缓存的视图组件 --> <router-view v-if="!$route.meta.keepAlive" /> watch: { $route(to, from) { console.log(to); // 如果是后退 if (to.meta.deepth < from.meta.deepth) { to.meta.keepAlive = false; } else { to.meta.keepAlive = true; } } }, new Router({ routes: [ { path: '/', name: 'index', component: () => import('./views/keep-alive/index.vue'), meta: { deepth: 1, // 同级 不刷新 keepAlive: true } }, { 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: 0, // 进入list不刷新页面 keepAlive: false } }, { path: '/edit', name: 'edit', component: () => import('./views/keep-alive/edit.vue'), meta: { deepth: 2, // 进入list刷新页面 keepAlive: false } } ] })