1、keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。
不缓存就会在切换组件时不断创建和销毁。
<keep-alive>
<component></component> <!-- 该组件将被缓存! -->
</keep-alive>
当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。
activated 在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。
deactivated 在组件被停用时调用。
只有组件被 keep-alive 包裹时,这两个生命周期才会被调用。使用 exclude 排除之后,就算被包裹在 keep-alive 中,也不会被调用。
被包裹在keep-alive中的组件的状态将会被保留,例如我们将某个列表类组件内容滑动到第100条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第100条列表处。
2、include、exclude属性
include - 字符串或正则表达,只有匹配的组件会被缓存
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
// 组件 a
export default {
name: 'a',
data () {
return {}
}
}
<keep-alive include="a">
<component>
<!-- name 为 a 的组件将被缓存! -->
</component>
</keep-alive>
<keep-alive exclude="a">
<component>
<!-- 除了 name 为 a 的组件都将被缓存! -->
</component>
</keep-alive>
3、router.meta 属性
// routes 配置
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件,比如 Home! -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>
优点:不需要例举出需要被缓存组件名称
4、beforeRouteLeave
需求:1个路由A, B,C,默认显示 A,B 跳到 A,A 不刷新,C 跳到 A,A 刷新
1)默认显示 A:在 A 路由里面设置 meta 属性
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 需要被缓存
}
}
2)B 跳到 A,A 不刷新:在 B 组件里面设置 beforeRouteLeave
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // 让 A 缓存,即不刷新
next();
}
};
3)C 跳到 A,A 刷新:在 C 组件里面设置 beforeRouteLeave
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // 让 A 不缓存,即刷新
next();
}
};
5、 router.go(-1)返回