Watch route object on vue js

vue.js watch
Komang Suryadana picture Komang Suryadana · Jun 22, 2018 · Viewed 32.4k times · Source

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

ittus picture ittus · Jun 22, 2018

Did you try deep option?

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

Related questions

How to Properly Use Vue Router beforeRouteEnter or Watch to trigger method in Single File Component?

I'm working on an app in Vue.js using Single File Components and Vue Router. I have a Search component where I need to execute a method to re-populate search results each time a user visits the route. The method …

Read More
How do I watch all keys in a data object in Vue 2

My data object: data: { selected: { 'type': null, 'instrument': null }, My template: <select v-model="selected['instrument']" @change="switchFilter('instrument', $event)"> <option v-for="instrument in instruments" :value="instrument.value">@{{ instrument.text }}</option> </select> <…

Read More
Watch route changes in Vue.js with Typescript

I'd like to detect changes in my URL in a Vue.js application using TypeScript. In JavaScript this can be done as follows: watch: { '$route': { handler: 'onUrlChange', immediate: true, deep: true } }, onUrlChange(newUrl){ // Some action } How could I do …

Read More