<keep-alive>
的使用
使用背景:
- 有些组件不需要多次的init,但是,vue中,每次点击对应的页面,每次都会进行重新的数据请求和页面DOM组件树的渲染
- 用户在点击某个链接跳转到下个页面后,想返回上一个页面的时候,上次的操作痕迹还在.
使用方法:
- 使用vue中的keep-alive组件,组件地址:https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js
一、在router.js路由表中给想要缓存的页面添加上keepAlive.
{
path: '/403',
component: () => import('../components/page/403.vue'),
meta: {
keepalive: true,
title: '403'
}
},
二、在相应使用需要缓存的页面引用处使用标签给包起来.
<transition name="move" mode="out-in">
<keep-alive :include="tagsList">
<router-view></router-view>
</keep-alive>
</transition>
include和exclude属性的使用
export default{
name:'home',
data(){
return{}
}
}
- 在使用组件的父组件的
<keep-alive>
中添加exclude= ‘home’
,这样 home 组件就不会保留,在每次进入的时候都会进行重新的渲染,不保留痕迹.
<keep-alive exclude=‘home’>
<router-view></router-view> // 其实如果里面没有内容可以写成单标签
</keep-alive>
- 如果是多个需要进行特殊处理,都添加在
exclude
后面就可以了. - 如果只有少数的组件需要特殊处理,可以使用
include
.
3、使用keep-alive后组件的声明周期
- 使用keep-alive后的组件将会多出actived和deactived两个声明周期
- 1、actived: 当该页面组件被第一次加载的时候,会触发,其触发的钩子顺序为 created->mounted->activated
- 2、deactived: 当用户离开该组件页面事触发.