vue中动态化的按需使用keep-alive

1、啥是 keep-alive?

  • 就是缓存,我们还是来看看具体的使用场景。
  • 首先简单一点,第一种比较普遍的场景,当我们从首页–>列表页–>商详页–>再返回,这时候列表页应该是需要keep-alive的。
  • 然后第二种,当我们从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存),这时候就是按需来控制页面的keep-alive了。
    vue中动态化的按需使用keep-alive
  • 下面我们来说说在vue中如何具体实现,我会说两种方式。

2、meta 路由元信息

(1)介绍

  • 第一种就是使用 vue-router 提供的 meta 对象,给需要缓存如首页、列表页、商详等添加一个字段,用来判断用户是前进还是后退以及是否需要 keep-alive,可以看看大佬的解释文章:–>vue 路由按需 keep-alive

(2)实现

  • 首先我们需要在router.jsmeta对象里定义两个值:
    1. keep-alive:这个路由是否需要缓存
    2. deepth:深度,也就是页面之间的前进后退的层次关系

  • 然后我们在app.vue中根据 meta 对象定义一下:

  • 最后我们需要实时的监听路由:

  • 上面这个就是大佬所实现的主要步骤,一共其实就两步:设置meta监听路由并判断。这里有一定要注意的是:你的路由中定义的 name 和页面中定义的 name 一定要全等,并区分大小写!!!

3、hack 手法

(1)问题

  • 从上面我们可以看到,其实设置起来还是挺严格的,就拿name一致来说,如果团队里面大家从一开始就都定义了一个规范那还好说,但是往往大家就name保持一致这个就可能很难。

(2)实现

  • 所以我们可以这样设置,首先我们肯定还是要利用meta.keeAlive字段来进行判断的,但是不用定义deepth深度了。

  • 进入到app.vue页面中我们为<router-view>添加一个key,这个key就像是我们使用v-for循环所定义的一样,大家都知道,key的作用就是一个标识对吧,作用于vue在虚拟 dom 进行diff算法,提高渲染效率。

  • 然后我们对其需要强制刷新的页面参数里加个时间戳,这样就可以实现按需keep-alive了。

3、小结

  • 两者相比,我觉得可能第二种更加的实用,比一种简单,但是有丑,因为会带串时间戳字符串如:http://localhost:8081/#/product?t=1585898137794
  • 第一种算是比较完美,其实设置起来也不难,只是对团队人员的规范性要求比较高。
  • 我们panda-mall项目中使用第二种方案,大家可以根据自己的背景任意选择一种方案,或者有更好的方案可以留言一起学习学习,
未经允许不得转载:一点博客-青梅煮码-共享博客 » vue中动态化的按需使用keep-alive
分享到:
赞(2) 打赏

评论抢沙发

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

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

支付宝扫一扫打赏

微信扫一扫打赏