keep-alive遇见vue-router
keep-alive
是Vue
内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
- 它们有两个非常重要的属性
-
include
- 字符串或正则表达,只有匹配的组件会被缓存 -
exclude
- 字符串或正则表达式,任何匹配的组件都不会被缓存
-
router-view
也是一个组件,如果直接被包在keep-alive
里面,所有路径匹配到的视图组件都会被缓存
<keep-alive>
<router-view>
<!-- 所有的路径都匹配到的视图组件都会被缓存 -->
</router-view>
</keep-alive>
这有当该组件被keep-alive
包裹时才能使用的两个回调函数
activated
deactivated
- 页面第一次进入,钩子的触发顺序
created-> mounted-> activated
,退出时触发deactivated
。 当再次进入(前进或者后退)时,只触发
activated
。