vue 路由 按需 keep-alive

vue 路由 按需 keep-alive

vue 路由 按需 keep-alive

situation

一个常见的的场景,

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

我们希望,

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

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

task

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

action

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

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

思路如下图:

vue 路由 按需 keep-alive
  1. 写2个 router-view 出口

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

2.按需keep-alive

vue 路由 按需 keep-alive
vue 路由 按需 keep-alive

官方文档提供的api入手:

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

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

vue 路由 按需 keep-alive

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

需要注意的是

vue 路由 按需 keep-alive

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

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

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

vue 路由 按需 keep-alive

result

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

vue 路由 按需 keep-alive
vue 路由 按需 keep-alive

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

写在最后

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

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

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

  1. 还有得方法是 通过在keep-alive 的视图组件在退出 rotuer 的时候,调用this.$destory() 直接摧毁组件,这会导致组件没法在缓存,这个bug ,在官方issue有提到。
未经允许不得转载:一点博客-青梅煮码-共享博客 » vue 路由 按需 keep-alive
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏