How to force Vue to destroy and re-create the component on route change?

Question

My routes in Vue router:

{ path: 'articles/create', component: () => import('Detail.vue') },
{ path: 'articles/:id/edit', component: () => import('Detail.vue') },

As you can see, I render the same Vue component Detail.vue on both routes.

How do I "force" Vue to destroy & re-create the Detail.vue component when the URL changes from for example /articles/5/edit to /articles/create ?

Adlai

Answer 1

<router-view :key="$route.fullPath" />

Just be aware that this only forces router to destroy/create component and has no effect on router hooks - for example beforeEnter hook will not be called even that target component is destroyed and new one is created...

Extracanonical