vue.js - route - Vuejs: evento sobre cambio de ruta

vue title attribute

Question

En mi página principal tengo @click = "show=!show" desplegables que muestran v-show=show haciendo clic en el enlace @click = "show=!show" y quiero configurar show=false cuando cambio la ruta. Avísame por favor cómo realizar esto.

Answer 1

Configure un watcher en la $route en su componente de esta manera:

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

Esto observa los cambios de ruta y cuando se cambia, los conjuntos se show como falsos

Answer 2

El vigilante con la opción profunda no funcionó para mí.

En cambio, uso el enlace de ciclo de vida actualizado () que se ejecuta cada vez que cambian los datos del componente. Solo úsalo como lo haces con montado () .

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

Para su referencia, visite la documentation .

Answer 3

Las respuestas anteriores son mejores, pero solo para completar, cuando está en un componente puede acceder al objeto de historial dentro del VueRouter con: this. $ Router.history. Eso significa que podemos escuchar los cambios con:

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

Creo que esto es principalmente útil cuando se usa junto con este. $ Router.currentRoute.path Puede verificar de qué estoy hablando acerca de colocar un debugger

instrucciones en su código y comience a jugar con la consola Chrome DevTools.

Answer 4

Si está utilizando v2.2.0, entonces hay una opción más disponible para detectar cambios en $ routes.

Para reaccionar a los cambios de parámetros en el mismo componente, simplemente puede mirar el objeto $ route:

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

O utilice el protector beforeRouteUpdate presentado en 2.2:

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

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

Answer 5

Solo en caso de que alguien esté buscando cómo hacerlo en mecanografiado, esta es la solución

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