Vue 路由按需keep-alive(附源码）

Vue 代码demo运行动画：

situation

一个常见的的场景，

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

我们希望，

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

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

那么

keep-alive是 Vue提供的一个抽象组件，主要用于保留组件状态或避免重新渲染。

但是 keep-alive会把其包裹的所有组件都缓存起来。

action

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

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

思路如下图:

1. 写2个 router-view 出口

1. <keep-alive>

2.  

3. <router-view v-if="$route.meta.keepAlive">

4. </router-view>

5. </keep-alive>

6.  

7.  

8. <router-view v-if="!$route.meta.keepAlive">

9. </router-view>

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

1. new Router({

2. routes: [

3. {

4. path: '/',

5. name: 'index',

6. component: () =import('./views/keep-alive/index.vue'),

7. meta: {

8. deepth: 0.5

9. }

10. },

11. {

12. path: '/list',

13. name: 'list',

14. component: () =import('./views/keep-alive/list.vue'),

15. meta: {

16. deepth: 1

17. keepAlive: true

18. }

19. },

20. {

21. path: '/detail',

22. name: 'detail',

23. component: () =import('./views/keep-alive/detail.vue'),

24. meta: {

25. deepth: 2

26. }

27. }

28. ]

29. })

2.按需keep-alive

 

我们从官方文档提供的api入手,

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

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

1. <keep-alive>

2. <router-view :include="include" v-if="$route.meta.keepAlive">

3. </router-view>

4. </keep-alive>

5. <router-view v-if="!$route.meta.keepAlive">

6. </router-view>

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

1. export default {

2. name: "app",

3. data: () =({

4. include: []

5. }),

6. watch: {

7. $route(to, from) {

8.  

9. if (to.meta.keepAlive) {

10. !this.include.includes(to.name) && this.include.push(to.name);

11. }

12.  

13. //再根据 deepth 来判断是前进还是后退

14.  

15. if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {

16. var index = this.include.indexOf(from.name);

17. index !== -1 && this.include.splice(index, 1);

18. }

19. }

20. }

21. };

需要注意的是

keep-alive需要其包裹的组件有name属性，

我们上面的代码中的 push 和 splice 的是 router 的 name。

所以建议大家把 route 的 name属性设置和 route对应 component的 name设成一样的。

result

让我们验证一下我们的成果

 

在 vue-devtool 里，灰色的组件，代表是缓存状态的组件，注意观察 list的变化。

写在最后

1. 实现按需 keep-alive ，网上有方法，通过修改 route 配置里的 meta里的keepAlive 值来实现。

直接修改 meta 的值，可能会出现上图的情况，keep-alive里有一直有一个缓存的 list,正常的 rotuer-view 里也有一个,

复现这个问题需要很长得篇幅，感兴趣的朋友可以自己去爬一下坑。

1. 还有得方法是 通过在keep-alive 的视图组件在退出 rotuer 的时候，调用this.$destory() 直接摧毁组件，这会导致组件没法在缓存，这个bug ，在官方issue有提到。

参考资料

官方issue

Vue项目全局配置页面缓存，实现按需读取缓存

https://share.weiyun.com/5qZnhDd