How update a VUE component changing URL param in current page

Question

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

Possible duplicate of [Vuejs: Event on route change](https://stackoverflow.com/questions/46402809/vuejs-event-on-route-change) — tbhaxor, Aug 27 '19 at 06:10
yes we are talking about router but this is a different case, imho. — Uncoke, Aug 27 '19 at 06:28

score 4 · Accepted Answer · answered Aug 27 '19 at 05:35

4

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

answered Aug 27 '19 at 05:35

Satyam Pathak

6,612
3
25
52

Yes! You got it! I love vue and you! I used it into the parent component and it works like a charm! – Uncoke Aug 27 '19 at 05:44

How update a VUE component changing URL param in current page

1 Answers1