vue使用keep-alive缓存页面数据

 

Keep-alive组件缓存

 vue内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。提高性能。

1，语法：

 
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive" />
 

2，属性 

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例

3,生命周期

activated:进入页面

deactivated:离开页面

顺序：created----mounted----activated

4，使用方法

 首先在定义路由的时候配置 meta 字段，自定义一个KeepAlive字段作为该页面是否缓存的标记：

router.js

const router=  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [{
    path: '/',
    name: 'home', 
    component: Home,  
    meta:{
      keepAlive: true // 是否缓存组件
    }, 
    redirect: {
      name: 'Login'
    } 
  },
  {
    path: '/HomePage', // 首页面
    name: 'HomePage',
    component: () => import('./views/HomePage.vue'),
    meta: {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
      keepAlive: true  
    },
    {
      path: 'onlineQuery',
      name: 'onlineDatails',
      component: () => import('./views/Datails/onlineDatails.vue'),
      meta: {
        keepAlive: true 
      }
    }
    ,{
    path: '/Login', // 登录
    name: 'Login',
    component: () => import('./views/Login.vue'),
    meta: {
      keepAlive: false 
    }
  },
  {
    path: '*', // 未匹配到路由时重定向
    redirect: '/',
    meta: {
        // requiresAuth: true,
        // keepAlive: true
    }
}
]
})

1）页面使用

App.vue:

<div id="app">
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive" />
</div>

 如果你的页面显示都在子路由显示，则只需要在这里定义就好了，那么你的app.vue页面就不需要定义了：

2）使用属性方法：

使用<keep-alive>提供的 exclude 或者 include 选项，此处我们使用 exclude ，在App.vue中：

<div id="app">
 <keep-alive exclude="detail">
  <router-view />
 </keep-alive>
</div>

需要注意的是，一定要给页面组件加上相应的name，例如在detail.vue中：

<script>
export default {
 name: 'detail', // 这个name要和keep-alive中的exclude选项值一致
 ...
}
</script>

这么写就代表了在项目中除了name为detail的页面组件外，其余页面都将进行缓存。

include 选项则相反。