Vue Router and VueJS reactivity Vue Router and VueJS reactivity vue.js vue.js

Vue Router and VueJS reactivity


What's causing this behaviour is the fact, that the route object is immutable in Vue. Any successful navigation will result in a completely new route object therefore triggering a re-computation of all computed and watched properties. See https://router.vuejs.org/api/#the-route-object for more details.

To solve this you can watch the route object and filter the relevant vs irrelevant changes for you there

watch: {  '$route' (to, from) {    if(to.path != from.path) { // <- you may need to change this according to your needs!      this.relevantRoute = to    }  }}

And then reference the manually set variable in your computed and/or watched properties

templateId() {  return parseInt(this.relevantRoute.params.id, 10);},