keep-alive遇见vue-router

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。