Vuejs Event on route change

Question

In my main page I have dropdowns that show v-show show by clicking on link  click    show  show  and I want to set show false when I change route  Advise me please how to realize this thing

User · Answer

Just incase if anyone is looking for how to do it in typescript here is the solution

   @Watch('$route', { immediate: true, deep: true })
   onUrlChange(newVal: Route) {
      // Some action
    }

And yes as mentioned by @Coops below, please do not forget to include

import { Watch } from 'vue-property-decorator';

Edit: Alcalyn made a very good point of using Route type instead of using any

import { Watch } from 'vue-property-decorator';    
import { Route } from 'vue-router';

User · Answer

The above responses are the better  but just for completeness  when you are in a component you can access the history object inside the VueRouter with  this  router history  That means we can listen to changes with   this  router listen  newLocation    gt  console log newLocation      I think this is mainly useful when used along with this  router currentRoute path You can check what I am talking about placing a debugger  instruction in your code and begin playing with the Chrome DevTools Console

User · Answer

If you are using v2 2 0 then there is one more option available to detect changes in  routes  To react to params changes in the same component  you can watch the  route object  const User       template           watch          route   to  from             react to route changes                 Or  use the beforeRouteUpdate guard introduced in 2 2  const User       template           beforeRouteUpdate  to  from  next           react to route changes           don t forget to call next          Reference  https   router vuejs org en essentials dynamic-matching html

User · Answer

Setup a watcher on the  route in your component like this   watch        route  to  from           this show   false             This observes for route changes and when changed  sets show to false

User · Answer

Another solution for typescript user    import Vue from  vue   import Component from  vue-class-component     Component     beforeRouteLeave to  from  next           incase if you want to access  this         const self   this as any      next            export default class ComponentName extends Vue

User · Answer

Watcher with the deep option didn t work for me   Instead  I use updated   lifecycle hook which gets executed everytime the component s data changes  Just use it like you do with mounted     mounted           to be executed when mounted       updated        console log this  route      For your reference  visit the documentation

[vue.js] Vuejs: Event on route change

Examples related to vue.js

Examples related to vuejs2

Examples related to vue-router