Vuejs: Evento sobre cambio de ruta
En mi página principal tengo menús desplegables que se muestran v-show=showal hacer clic en el enlace @click = "show=!show"y quiero configurar show=falsecuándo cambio la ruta. Por favor, avíseme sobre cómo realizar esto.
Configure un observador en $routesu componente de esta manera:
watch:{
$route (to, from){
this.show = false;
}
}
Esto observa los cambios de ruta y, cuando se cambia, se establece showen falso.
Si está utilizando v2.2.0, hay una opción más disponible para detectar cambios en $routes.
Para reaccionar a los cambios de parámetros en el mismo componente, puede observar el objeto $route:
const User = {
template: '...',
watch: {
'$route' (to, from) {
// react to route changes...
}
}
}
O utilice la protección beforeRouteUpdate introducida 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
En caso de que alguien esté buscando cómo hacerlo en Typecript, aquí está la solución:
@Watch('$route', { immediate: true, deep: true })
onUrlChange(newVal: Route) {
// Some action
}
Y sí, como lo menciona @Coops a continuación, no olvide incluir:
import { Watch } from 'vue-property-decorator';
Editar: Alcalyn hizo un muy buen comentario al usar el tipo de ruta en lugar de usar cualquiera:
import { Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';
Watcher con la opción profunda no funcionó para mí.
En su lugar, utilizo el gancho de ciclo de vida actualizado() que se ejecuta cada vez que cambian los datos del componente. Úselo como lo hace con mount() .
mounted() {
/* to be executed when mounted */
},
updated() {
console.log(this.$route)
}
Para su referencia, visite la documentación .
