Vuejs: route change event

On my main page I have drop-down menus showing v-show=showby clicking on the link @click = "show=!show", and I want to set show=falsewhen changing the route. Please advise me how to implement this.

+80
source share
6 answers

Set observer on $routein your component as follows:

watch:{
    $route (to, from){
        this.show = false;
    }
} 

It watches for route changes and when changing, sets showfalse

+172
source

If you are using v2.2.0, then there is another option available for detecting changes in $ routes.

To respond to parameter changes in the same component, you can simply observe the $ route object:

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

beforeRouteUpdate, 2.2:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

: https://router.vuejs.org/en/essentials/dynamic-matching.html

+27

- , ,

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

, @Coops ,

import { Prop, Watch } from "vue-property-decorator";
+7

, : , VueRouter : this. $ Router.history. , :

this.$router.listen((newLocation) =>{console.log(newLocation);})

, , . $ Router.currentRoute.path , debugger

Chrome DevTools Console.

+1

.

Instead, I use updated () the lifecycle trap that is executed each time the component data changes. Just use it, as with mount () .

mounted() {
   /* to be executed when mounted */
},
updated() {
   console.log(this.$route)
}

For help, visit the documentation .

+1
source

There is an updated life cycle state

0
source

Source: https://habr.com/ru/post/1686337/


All Articles