vue-router 页面缓存之 keep-alive

项目中会有这样的需求,有的页面需要缓存(例如列表页),有的页面不需要缓存(例如详情页),这时候就需要 keep-alive

keep-alive 缓存

1.路由设置 meta 的 keepAlive

 

{
    path: '/list',
    name: '首页',
    component: Home,
    meta:{keepAlive:true}
},
{
    path: '/detail/:id',
    name: '首页',
    component: Home,
    meta:{keepAlive:false}
}

2.修改 app.js 的根路由视图

 

<template>
  <div id="app">
   <keep-alive>     <!--使用keep-alive会将页面缓存-->
    <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive> 
     <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

有时候还有更细度的控制

比如：

从 B => A , A 缓存
从 C => A , A 不缓存

 

//缓存页面
beforeRouteLeave(to, from, next) {   
   // 设置下一个路由的 meta
    to.meta.keepAlive = true; // B 跳转到 A 时，让 A 缓存，即不刷新（代码写在B页面）
    next();
   }

 

beforeRouteLeave(to, from, next) {   
   // 设置下一个路由的 meta
    to.meta.keepAlive = false; // B 跳转到 A 时，让 A 不缓存，即刷新（代码写在C页面）
    next();
   }