使用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 // 需要缓存
}
},
]
})