其他分享
首页 > 其他分享> > keep-alive

keep-alive

作者:互联网

1、介绍

① keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

它们有两个非常重要的属性:

include - 字符串或正则表达,只有匹配的组件会被缓存

exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存

②router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存:

③通过create声明周期函数来验证

2、当碰见有默认值跳转路径的时候,怎么用keep-alive?

由于在配置/home组件子路由的时候,让他进入/home路径后自动跳转到/home/news,这个对我们组件保存有影响,如下:

解决方法:因为在用keep-alive的时候,组件的activated和deactivated函数可以使用。我们可以在home的activated的时候加载data中的path,在离开该路径的时候用beforeRouteLeave更新path的值即可:

//activated和deactivated只有在该组件被保持了状态,使用了keep-alive才能有用

标签:缓存,activated,alive,keep,组件,home
来源: https://blog.csdn.net/weixin_43613849/article/details/118380876