当keep-alive存在时, activated,deactivated才会被调用;
默认情况下,当路由(浏览器url)改变时,改变前的路由 所映射的组件(假设是组件A) 会被销毁(destroyed回调),组件A 的data中保存的变量都会被销毁;但是当有keep-alive时,组件A 不会被销毁,只会调用deactivated,所以组件A 的data中保存的变量和值都被缓存了,再次回到组件A时,会执行activated,而不会执行created,之前保存的data值也没改变;
注意:假设 路由A对应组件A,路由B对应组件B,从 路由A 跳到 路由B 时,vue会先执行组件B的 created方法,再执行组件A的 destroyed方法;而且在 组件A的 destroyed方法 中获取的 this.$route.path(当前活跃路由的path) 已经是 路由B的path 了。
有的情况下,我们希望一些组件被缓存,一些组件不被缓存,有两种实现方式:
方式一:
<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>
{
path: "/comRegistered",
name: "comRegistered",
component: () => import("@/views/companyApply/comRegistered.vue"),
},
{
path: "/comInformation",
name: "comInformation",
component: () => import("@/views/companyApply/comInformation.vue"),
meta: {keepAlive:false},
},
{
path: "/uploadPicture",
name: "uploadPicture",
component: () => import("@/views/companyApply/uploadPicture.vue"),
meta: {keepAlive:true},
},
方式二:
<template>
<div id="app">
// 注意:home,user之间不能有空格;home,user是组件的name
// home,user就不会被缓存了
<keep-alive exclude="home,user">
<!-- 路由匹配到的组件将显示在这里 -->
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'home'
}
</script>
<script>
export default {
name: 'user'
}
</script>