Watch route object in VueJS 2

Question

How to watch route object on VueJS 2?. This is my code

watch: { 
  '$route.params.search': function(search) {
    console.log(search)
  }
}

It doesn't work.

I try use with deep still not working on here

Look on code sandbox you can watch route object on main.js.

You should not watch for the route object inside any other components. Because components get destroyed when router link changes. You should do it in the main.js file, according to your directory structure

Thanks @santanu and @ittus

I think it might be counter-productive to use `vue` to watch `vue-router`, especially when `vue-router` has built in hooks for this exact reason — Derek Pollard, Jun 22 '18 at 05:39

score 60 · Accepted Answer · edited Oct 20 '22 at 08:32

60

Did you try deep option?

watch: { 
  '$route.params.search': {
    handler: function(search) {
      console.log(search)
    },
    deep: true,
    immediate: true
  }
}

edited Oct 20 '22 at 08:32

kissu

40,416
14
65
133

answered Jun 22 '18 at 05:16

ittus

21,730
5
57
57

On this case i change params with router link from other component. – Komang Suryadana Jun 22 '18 at 05:22
Does it work if you only watch $route? ```watch: { '$route': { handler: function(to) { console.log(to.params) }, deep: true } }``` – ittus Jun 22 '18 at 05:24
I make a simple exmaple on here can you look [here](https://codesandbox.io/embed/xvx81l9wrw) – Komang Suryadana Jun 22 '18 at 05:39
What do you want to achieve? To have `params`, you need to pass parameter to router like [document](https://router.vuejs.org/guide/essentials/dynamic-matching.html). Otherwise, `$route.params` is empty object. – ittus Jun 22 '18 at 05:59
I am already to pass params with ```methods: { goTo: function(page) { this.$router.push({ name: page, params: { page: page } }); } }``` I look params is not empty on my devtools – Komang Suryadana Jun 22 '18 at 06:03
This for result params is not empty object you can look on my codesanbox. – Komang Suryadana Jun 22 '18 at 06:09
Ok, I see. So you can watch your `$route.params` now. You might want to add `immediate: true` option on watcher. I updated my answer. – ittus Jun 22 '18 at 06:39
Quick tip. In vue 3 deep:true is not required. Remembering that this tag brings bad performance – Mithsew Aug 21 '23 at 14:33

score 33 · Answer 2 · edited Oct 20 '22 at 08:33

33

In my code i did like the following -

watch:{
  '$route' (to, from){
    // Put your logic here...
  }
},

Don't watch for the $route object inside any other components. Because as the router link changes the component gets destroyed and new component is being mounted. So the watchers for the component gets destroyed. Watch for the $route object inside the root Vue instance where you inject the router object. like the following --

const app = new Vue({
  router,
  watch: {
    '$route' (to, from){
      // Code
    }
  }
}).$mount('#element');

edited Oct 20 '22 at 08:33

kissu

40,416
14
65
133

answered Jun 22 '18 at 05:33

santanu bera

1,281
10
16

Hay @santanu i following your code still not work. Can you help me on [here](https://codesandbox.io/s/xvx81l9wrw) – Komang Suryadana Jun 22 '18 at 05:56
2

You should not watch for the route object inside any other components. Because components get destroyed when router link changes. You should do it in the main.js file, according to your directory structure. – santanu bera Jun 22 '18 at 06:15
1

@santanubera if said component never gets destroyed then it's totally valid to watch the route object from it, for example your navigation component. – Stark Dec 18 '19 at 02:51

score 14 · Answer 3 · answered Mar 11 '19 at 11:28

14

Simple use:

watch: {
    "$route.params.search"(value) {
      //Your code here
    }
  }

answered Mar 11 '19 at 11:28

Nuno Ribeiro

2,487
2
26
29

score 7 · Answer 4 · answered Jul 16 '19 at 01:57

I was having trouble with reactivity, dynamically changing route with a router-link.

The issue was that the route will change but my siteData fetched from a method returned by data() was not:

I had to watch the route like so:

    watch: {
      '$route' (to, from) {
        if(to !== from ) {
          this.siteData = this.getSiteData();
        }
      }
    },

Hope this helps others with this problem

Watch route object in VueJS 2

4 Answers4