gabrielbuzzi
2 years ago
3413
11
Vue

[Vue 2] Reload component when same route is requested

Posted 2 years ago by gabrielbuzzi

The Scenario

My application in a SPA, and i'm building using Vue 2 and Vue Router 2.

I have a page that show some data about the user, the route is like "/user/:id/details", this route load a components that have a hook mounted that load via "ajax" request the data about the user.

And i have in my sidebar a kind of search, where i write the name of the user and i can click to access the page.

The problem

When i already load the component one time, for example: "accessed the route /user/1/details". If i click in the router-link to go to "/user/2/details" the component don't hook the mounted hook again, since the component is not destroyed and the data is not reloaded, so the url change, but the data don't.

What i need

When i click in the router-link, the component of the current page need to be destroyed and created/mounted again.

Some code

Details.vue mounted hook

mounted () {
    const vm = this

    vm.$http.get('/api/users/' + vm.$route.params.id)
        .then(response => {
            vm.user = response.data
        })
}

My route

{ path: '/user/:id/details', component: Details, name: 'user.details' },

Image of the situation

Image of Problem

In this image i first access the detail of John doe, then i tried to click in Jane doe, but in this case the component is not destroyed and created again, so the hook mounted never is throwed when i try to access a page that use the same component of the current page.

Please sign in or create an account to participate in this conversation.