vue设置缓存的方法 (有的页面需要缓存 有的页面不需要)

vue设置缓存的方法

1.在App.vue中判定要不要缓存

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

2.在那个路由中需要缓存 开启

meta: { keepAlive: true }

{
        path: '/operationLog',
        name: 'OperationLog',
        meta: {
          title: '日志管理',
          keepAlive:true
        },
        component: () => import('@/viewst/log/operationLog')
      }

3.在单独页面的使用

beforeRouteLeave(to, from, next) {
  // 导航离开该组件的对应路由时调用
  if (to.name == "networkDataDetails" || to.name == "businessDataDetails") {
    //前往详情页面时缓存页面
    from.meta.keepAlive = true;
  } else {
    // 是去 C 页面，缓存
    from.meta.keepAlive = false;
  }
  next();
},