vue-router-keep-alive及其他问题和属性介绍

vue-router-keep-alive及其他问题和属性介绍

keep-alive遇见vue-router

keep-alive是Vue内置的一个组件,可以使用被包含的组件保留状态,或避免重新渲染。
它里面有两个非常重要的属性:
1.include - 字符串或正则表达式,只有匹配的组件会被缓存
2.exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存:

	
    
      
    

通过create生命周期函数来验证

1.生命周期函数回顾:mounted、 created、activated、deactivated、destroyed
2.keep-alive -> activated/deactivated,这两个函数,只有该组件被保持了状态使用了keep-alive时,才是有效的
3.首页中使用path属性记录离开时的路径,在beforeRouteLeave中记录。
使用了keep-alive页面都不会被频繁的创建和销毁,

你可能感兴趣的:(router)