CODEWITHSUNDEEP
vue.jsrouter
Uncoke
Uncoke

Reputation: 1902

How update a VUE component changing URL param in current page

In my vue SPA I have a simple router like this:

 {path: '/page/:userId', name: 'user', component: user},

Which means an url like http://xxx.xxx/user/1 shows the component user having the content about user 1.

In case on the same page I have some link as

<vue-link :to="{name:'user', params={userId:3}}">

The router update only the URL but the content page (because it assumes the page is the same where I'm at)

My user content loads data using the url params in data and in watch too

data

userId: this.$route.params.userId || 1,

watch

  watch: {

        userId: function () {
            return this.$route.params.userId || 1;
        },

How to fix it without using router-view?

Thanks for any suggestion

Upvotes: 3

Views: 4119

Answers (1)

Satyam Pathak
Satyam Pathak

Reputation: 6912

If I correctly get your problem which is that you are not able to track your route change. You need to watch the route change, whenever your route changed on a same component it should do something.

watch: {
    $route() {
        this.updatePage(this.$route.params.userId)
    }
},
methods: {
   updatePage(param) {
     // call api / do something
   }
}

Upvotes: 4

Related Questions