vue页面缓存

首先说一下缓存的使用场景，比如一个管理端的项目从列表页编辑进入详情页再次返回列表页时要保留之前的状态，又比如我们要缓存某些表单页面。这些都可以通过路由容器的keep-alive方法来实现。下面我们来说一下它的实现原理。

首先我们要先在路由容器里面设置一个include属性(缓存多个组件逗号隔开即可)，把你要缓存的路由组件name添加到这里来就可以了，要注意的就是我们的路由对应的组件name一定要和下面的要缓存页面的组件名称保持一致，因为keep-alive 在判断组件是否需要缓存的时候，进行正则匹配/名称匹配的时候，就是根据组件的名称来进行判断的。

在路由这一块我们可以这样设置

 

{
   path: '/dreamSend',
   name: 'dreamSend',//这里的name需和组件name命名保持一致
   component: r => require.ensure([], () => r(require('../components/system/msg/list.vue')), 'dreamSend')
}

上面路由的name尽量需和组件name保持一致，这样我们能够更加方便的去动态的添加或者修改我们要缓存的页面组件。

通过上面的设置就能实现页面组件的缓存了，补充一点加入要刷新缓存页面的数据可以在activated中调用请求

activated(){
    this.getData()
},

当然我们还有其他的方法也是可以实现组件缓存的，比如可以通过router.meta属性来实现，这里简单说一下

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

这样子写的好处就是不用去指定要绑定组件的name，好了就简单介绍到这里，欢迎各位评论指出不足！