keep-alive 缓存指定路由

木灵鱼儿

126 天前vue 项目实战

55 0 0

一般情况下，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属性。

一个数组，包含当前路由的所有嵌套路径片段的路由记录
一个路由匹配到的所有路由记录会暴露为 $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>

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