vue缓存

vue 缓存组件的逻辑是

开启缓存后第一次进入页面会执行一次 created -> mounted -> activated 之后路由跳转只会执行 activated，关闭缓存后再次进入页面就会执行 created 和 mounted 不再执行 activated

如果我们的数据列表是来源于后端，开启缓存后还想发起请求就可以在 activated里面编写请求逻辑。

activated () {
  if (true) {
    // 请求数据接口
    this.getList();
  }
}

 

1. 在App.vue 文件里面开启缓存

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

2. 路由文件开启缓存

export default new Router({
  mode: "history",   // 删除浏览器里面的 /#
  routes: [
    {
      path: '/',
      name: 'A',
      component: () => import('../pages/A.vue'),
      meta: {
        title: 'A',
        keepAlive: true
      }
    },
    {
      path: '/B',
      name: 'B',
      component: () => import('../pages/B.vue'),
      meta: {
        title: 'B',
        keepAlive: true
      }
    },
    {
      path: '/C',
      name: 'C',
      component: () => import('../pages/C.vue'),
      meta: {
        title: 'C',
        keepAlive: true
      }
    },
  ]
})

 

3. 动态开启/关闭指定页面缓存

<template>
  <div>
    Cyemian
    <ul class="ul">
      <button @click="clearKeepAlive(true)">清除缓存</button>
      <button @click="clearKeepAlive()">开启缓存</button>
      <li v-for="(item, index) in list" :key="index" @click="listItemClick">
        {{item}}
      </li>
    </ul>
  </div>
</template>

this.$router 查看所有页面的路由信息， this.$route 查看当前页面的路由信息。

methods: {
  clearKeepAlive (val) {
    val ? this.$router.options.routes[0].meta.keepAlive = false : this.$router.options.routes[0].meta.keepAlive = true
  }
},