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

谁践踏了优雅 2023-08-17 16:25 132阅读 0赞

### 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:

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

2）使用属性方法：

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

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

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

include 选项则相反。

[activated]: https://cn.vuejs.org/v2/api/#activated
[deactivated]: https://cn.vuejs.org/v2/api/#deactivated
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20230810/99b66f018faa4fb28f2145153b89657b.png