vue 2 lifecycle - how to stop beforeDestroy?

Question

Can I add something to beforeDestroy to prevent destroying the component? ?

Or is there any way to prevent destroying the component ?

my case is that when I change spa page by vue-route, I use watch route first, but I found that doesn't trigger because the component just destroy..

Answer 1

As belmin bedak commented you can use keep-alive

• when you use keep-alive two more lifecycle hooks come into action, they are activated and deactivated hooks instead of destroyed

• The purpose of keep-alive is to cache and to not destroy the component

• you can use include and exclude atteibutes of the keep-alive element and mention the names of the components that shoulb be included to be cached and be excluded from caching. Here is documentation

• in case you want to forecefully destroy the component even if its cached you can use vm.$destroy() here

Further you can console.log in all the lifecycle hooks and check which lifecycle hook is being called

Answer 2

You can use vue-route navigation-guards, so if you call next(false) inside the hook, navigation will be aborted.

router.afterEach((to, from) => {
  if(your condition){
    next(false) //this will abort route navigation
  }
})