Respuestas:
Configure un observador en el $route
componente de esta manera:
watch:{
$route (to, from){
this.show = false;
}
}
Esto observa los cambios de ruta y, cuando se cambia, se establece show
en falso
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
beforeRouteUpdate
solo funciona en la vista que declara el método y no en ningún componente secundario
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: 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 uso del tipo de ruta en lugar de usar cualquier
import { Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { Prop, Watch } from "vue-property-decorator";
any
tipo, es posible que desee usar la interfaz Route
deimport { Route } from 'vue-router';
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.
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 documentación .
Otra solución para el usuario mecanografiado:
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 {}
$route: function(to, from) {
si desea admitir navegadores más antiguos y no está usando babel.