vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）-阿里云开发者社区

vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）

2024-07-01 7

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue 页面缓存 keep-alive（含配置清除页面缓存 exclude，局部缓存，动态缓存，路由控制缓存 $route.meta.keepAlive）

添加页面缓存

src/App.vue

使用keep-alive组件包裹，则再次进入页面时，会使用缓存中的组件，不会重新渲染（不再执行mounted及之前的生命周期中的代码），用于保存组件的原始状态（所有变量的值保持最终状态不变）

<keep-alive>
    <router-view></router-view>
</keep-alive>

清除页面缓存

若部分页面希望每次打开时，都重新渲染（所有变量初始化为data中定义的值，并执行mounted及之前的生命周期中的代码），则需清除页面缓存

方式一：在 <keep-alive> 上添加 exclude属性

属性值为需清除缓存的页面的vue文件的name属性的值

比如针对 /test 路由对应的 test.vue组件清除缓存，则需

1. 给 test.vue 文件添加 name属性，值为“test” （可自定义为任意字符串）

    export default {
        name:'test',

2. 在 <keep-alive> 上添加 exclude属性

<keep-alive exclude="test" >
    <router-view></router-view>
</keep-alive>

若针对多个页面清除缓存，则使用 , 将name属性值隔开

<keep-alive exclude="test1，test2" >
    <router-view></router-view>
</keep-alive>

或使用正则表达式（注意需用：绑定exclude，正则表达式用“”包裹）

<keep-alive :exclude="/^test.*/" >
    <router-view></router-view>
</keep-alive>

方式二：通过路由传参实现 $route.meta.keepAlive

将 src/App.vue 中改为

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

在定义路由的文件中，设置 meta.keepAlive 参数，如在 src/routes.js 中

定义路由——使用缓存的页面

    // 使用缓存的页面
    {
        path: '/SUI',
        meta: {
            keepAlive: true
        },
        name: 'SUI官网',
        component: resolve => require(['@/projects/SUIweb/index'], resolve)
    },

定义路由——不使用缓存的页面

    // 不使用缓存的页面
    {
        path: '/dic',
        name: '速查手册',
        component: resolve => require(['@/projects/dic/index'], resolve)
    },

局部缓存

若同一页面中，有的组件使用缓存，有的组件不使用缓存，则使用keep-alive组件包裹需要使用缓存的组件即可

<!--列表组件使用缓存-->
<keep-alive >
    <List />
</keep-alive>
 
<!--详情组件不使用缓存-->
<Detail />

动态缓存

现需实现以下功能：

从文章新增页面到文章列表页面——刷新文章列表
从文章详情页面到文章列表页面——不刷新文章列表

即从不同页面进入相同页面，有时需使用缓存，有时不使用缓存，这时需使用到 beforeRouteLeave(to, from, next)

文章列表页的路由定义

{
  path: '/list',
  name: '文章列表',
  component: List.vue,
  meta: {
    keepAlive: true // 需要被缓存
  }
}

文章新增页面组件中，设置beforeRouteLeave

export default {
  beforeRouteLeave(to, from, next) {
    // 让文章列表不缓存，即刷新
    to.meta.keepAlive = false; 
    next();
  }
};

文章详情页面组件中，设置beforeRouteLeave

export default {
  beforeRouteLeave(to, from, next) {
    // 让 文章列表页面 缓存，即不刷新
    to.meta.keepAlive = true; 
    next();
  }
};