Watch route object on vue js

Question

How to watch route object on vue js?. 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 sanbox 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

Answer 1

Did you try deep option?

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

Answer 2

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');