keep-alive 缓存指定路由

. 发布于 vue 项目实战 类目


一般情况下,keep-alive会对组件进行缓存,然后下次进入的时候使用的是缓存,从而节省性能,但是也会有一定的问题,就是如果你的路由页面有分子路由,用户此时进入到了子路由b,而我们默认路由时a。

这就导致当我们利用路由跳转的时候,即便跳的是子路由a,但是因为缓存的问题,导致进入的是b,因为b被缓存了。

解决办法:

利用meta标签来判断,是否需要缓存,这就需要在每个路由配置上设置一个属性:

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]
<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->

减少使用meta

在每个路由上使用meta标签来判断实在是太麻烦了,有时候某一个大路由都不需要缓存,我们可以使用路由的matched属性。

  1. 一个数组,包含当前路由的所有嵌套路径片段的路由记录
  2. 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象)$route.matched 数组

意思就是这个数组包含了当前路由所有的嵌套记录,也就是说除了子路由信息,还可以访问到父路由信息,那么我可以给父路由设置一个meta信息,子路由就可以不用设置了。

然后通过matched属性来判断:

this.$route.matched.some(r => r.meta.keepAlive);

some方法会遍历这个数组,然后判断每个路由片段里面的meta标签是否有keepAlive,有则返回true,无则false。

我们也可以给父路由设置keepAlive:false,这样some会直接拿到这个布尔值,也是可以达到要求的。

也就是说使用该方式,路由设置keepAlive为false或者不写,都可以理解为不缓存。

动画

如果对这个路由使用了动画,那么你需要写两次了。

<transition name="van-slide-up" mode="out-in">
    <keep-alive>
        <router-view v-if="isKeepAlive"></router-view>
    </keep-alive>
</transition>
<transition name="van-slide-up" mode="out-in">
    <router-view v-if="!isKeepAlive"></router-view>
</transition>

缓存的写一个,不缓存的写一个。

微信分享

评论:

暂无评论

Friend Link

搜索
去往底部
返回顶部