vue keep-alive使用方式

使用场景

在组件切换过程中仍然将数据保留在内存中，不会重新渲染DOM，例如某些页面进入下一页面并返回后，要求页面不刷新。这时就可以使用keep-alive

生命周期

当页面被keep-alive包裹时，activated、deactivated这两个生命周期才会被执行

activated

当组件被激活时调用，可以代替created执行，对缓存中的数据进行处理

deactivated

当组件停止使用时调用

根据Router，判断页面是否需要缓存

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>

<script>
export default {
  name: 'App'
}
</script>

router/index.js写法

import Vue from 'vue'
import Router from 'vue-router'
const Login = resolve => require(['@/src/views/login'], resolve)
const Home = resolve => require(['@/src/views/home'], resolve)

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
          path: 'login',
          name: 'login',
          component: Login,
          meta: {
        	keepAlive: false // 不需要缓存
      	  }
        },
        {
          path: 'home',
          name: 'home',
          component: Home,
          meta: {
        	keepAlive: true  // 需要缓存
      	  }
        },
  ]
})