缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated

目录

缓存路由组件

路由组件独有的生命周期钩子 activated 和 deactivated


缓存路由组件

正常情况下,切换路由组件时,不展示的路由组件会被销毁。为了让不展示的路由组件保持挂载,不被销毁,就用到了缓存路由组件。

想要某个组件在切换后不展示时不被销毁,将其 的写在标签里面。这样切换路由时,前一个路由就不会被销毁。

      
        
      

 默认是所有写在 所包裹里面的 组件切换后都不会销毁。 属性 include = 'News' 表示 组件名为News且是keep-alive所包裹,切换后不会被销毁。

问题:如果多个路由要在  中所展示,但是缓存的话,只想缓存其中的某几个路由,不想缓存所有的路由,写法:

       
        
      

缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated_第1张图片

分析:写成一个数组的形式,把所有需要缓存的路由名,写到数组里面。

注意点:这样缓存路由的话,会阻止该路由的销毁函数执行(beforeDestroy和destroyed),也就不能销毁。

路由组件独有的生命周期钩子 activated 和 deactivated

在写缓存路由时,用到 activated 和 deactivated,既能保证路由会被缓存,也能保证该路由会被激活和失活。

activated  在路由被激活时执行,deactivated在路由失活的时候执行。

eg:

缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated_第2张图片 

缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated_第3张图片 

缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated_第4张图片 

缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated_第5张图片 

 

 

你可能感兴趣的:(Vue的学习,前端,javascript,开发语言)