56. VUE keep-alive 组件视图缓存

keep-alive

这是个标签,了解vue生命周期的话,我们知道组件也是一样,会执行一遍生命周期,组件每次都要创建/销毁 和一系列的操作 ,损耗肯定会变很大,所以我们这里的<keep-alive>标签可以使我们之前的组件缓存下来,不会执行很多次 生命周期,只会执行一次。

 

我们只需要把   <router-view></router-view>  用     <keep-alive>  包裹起来,就实现了 路由组件的缓存  ,操作发现一只切换也不会一只调用vue生命周期:

56. VUE keep-alive   组件视图缓存    包裹起来

56. VUE keep-alive   组件视图缓存

 



keep-alive标签配套的两个方法:

activated()  和  deactivated()      一个是活跃函数  一个是不活跃函数,  即如果当前组件处于活跃就调用activated,否则就调用deactivated。

这两个函数前提条件是 组件视图必须被  keep-alive 包含才起作用,那么就是要在缓存条件下起作用。

56. VUE keep-alive   组件视图缓存    56. VUE keep-alive   组件视图缓存

 

所以这就是 这个keep-alive 标签

 



 

我们如果是嵌套路由的情况下,,,想实现  保持上次缓存视图(即 上次是哪个路由 回来就是那个路由【只有嵌套路由才能看出】)  那么:

我们的首页嵌套了两个路由  新闻 和 信息, 如果本来是信息的页面 我点击了个人,再次点击首页的时候显示上次的视图组件(即信息页面):

实现这个不能用生命周期函数,因为涉及到了路由的路径,既然涉及到了路由的路径,我么直接用导航守卫即可,我们就是要用【组件导航守卫】来解决:

56. VUE keep-alive   组件视图缓存    就是用最后一个 离开组件的时候 对应路由的调用

 

具体实现包含很多处修改 自己去捣鼓即可

 

上一篇:PBS 维护任务


下一篇:去哪儿-15-keep-alive