添加页面缓存
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(); } };