CODEWITHSUNDEEP
vue.jscomponentsrenderrerender
mspiderv
mspiderv

Reputation: 579

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

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 ?

Upvotes: 6

Views: 6180

Answers (1)

Michal Levý
Michal Levý

Reputation: 37793

<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...

Upvotes: 10

Related Questions