CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-router
user10877949
user10877949

Reputation: 63

How to solve Vue router change error with param?

There are 3 buttons(HOME, CARD, LOAN) on the toolbar and when I click them, they go to 'home', 'list/card', and 'list/loan' respectively.

This is my router.js code for 'list/card' and 'list/load'

{
        path: '/list/:id',
        name: 'listview',
        component: ListView
},

when I click the CARD on the loan page or LOAN on the card page, the URL on the URL bar of the browser is changed but the content of the page is not changed.

if I click either of these buttons on the other pages(for example HOME page), it works.

This is the code when I click the button

gotoPage(path) { // here path='/list/loan or path='/list/card'
   this.$router.push({ path: path })
}

This is the code for listview component

created: function () {
    this.loadUsers(this.$route.params.id)
},

The issue is that this created hook function is not working in this case.

Help me, please!!

Upvotes: 3

Views: 189

Answers (1)

Igor Carvalho
Igor Carvalho

Reputation: 698

Add the updated hook function.

Like this

created: function () {
    this.loadUsers(this.$route.params.id)
},
updated: function () {
    this.loadUsers(this.$route.params.id)
}

It will work.

Upvotes: 2

Related Questions