Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

The Vue.js Master Class

Force Vue Router to Destroy Component to Trigger Lifecycle Hooks thumbnail image

Get access to the most comprehensive Vue.js video library in the world. Over 300 video lessons including the newest Vue 3 features.

Force Vue Router to Destroy Component to Trigger Lifecycle Hooks

🚧 PLEASE NOTE: This masterclass is built with the Options API
vuejs-masterclass

The Composition API Masterclass is out!

In this lesson, we're learning how to force the vue router to destroy the component when we're navigating to another route that are using the same "PageComponent". This is important when you're relying on Vue's lifecycle hooks, for example as we do to fetch vital data from our database.

If we do not force the vue router to destroy the current component when we're navigating to another route, the router will try to be smart and just swap the props and the URL. This means that a new component will not be created and the lifecycle hook not fired!