- activated:{}----是vue的生命周期,指的是激活keep-alive缓存,优化性能,与之对应的生命周期是deactivted。
例如:
activated(){}
- keep-alive(缓存)
使用场景:当A页面跳转到B页面,做完操作之后B页面再返回A页面,这个时候A页面的数据还是存在的,就需要在A页面中使用keep-alive缓存。
使用方法:keep-alive一般是和路由router-view结合使用的。因为在Vue中页面的跳转是通过路由实现的。
使用过程:首先在配置页面路由的js文件的指定页面上加meta对象, 在对象中加keepAlive(需要缓存)属性或normal(不需要缓存)属性,然后在页面中(一般都是在项目的主页面中通过判断去写好keep-alive和router-view,这样后面在使用的时候就只需要在页面路由中配置meta对象即可)。
案例:
route.js
import Router from 'vue-router'
Vue.use(Router)
export const constantRouterMap = [
{
path:'/xxx',
name:'测试测试',
component:xxx,
meta:{
keepAlive:true,
normal:true
}
}
]
export default new Router({routes:constantRouterMap })
App.vue
<template>
<div id="app">
<router-view v-if="!$route.meta.keepAlive"></router-view>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="$route.meta.normal"></router-view>
<keep-alive>
<router-view v-if="!$route.meta.normal"></router-view>
</keep-alive>
</div>
</template>