vue路由组件缓存

1. 理解

1.1 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的

1.2 如果可以缓存路由组件对象, 可以提高用户体验

 

2 .<keep-alive>

<keep-alive> 是Vue内置的一个组件，通常是用来保留数据状态或避免重复渲染，也就是我们说的缓存效果

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component>
</keep-alive>

prop:

• include: 字符串或正则表达式。只有匹配的组件会被缓存。
• exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

 

// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}
 

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存！ -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存！ -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

当然我们也可以根据组件来动态缓存

<keep-alive>
    <router-view>
        <!-- 所有路径匹配到的视图组件都会被缓存！ -->
    </router-view>
</keep-alive>

我们还可以借助我们的路由元信息meta，那么我们来修改一下代码实现动态缓存：

（meta路由元信息对象里面放着的是类似于局部变量，在路由匹配的组件内部都能够访问得到，我们可以通过meta来定义一个自定义字段来判断标识页面是否需要开启缓存）

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

 //通过v-if来动态的判断展示
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>