Risposte:
Imposta un watcher sul $route
nel tuo componente in questo modo:
watch:{
$route (to, from){
this.show = false;
}
}
Questo osserva per le modifiche del percorso e, quando modificato, impostato show
su false
Se si utilizza v2.2.0, è disponibile un'altra opzione per rilevare le modifiche in $ rotte.
Per reagire alle modifiche dei parametri nello stesso componente, puoi semplicemente guardare l'oggetto $ route:
const User = {
template: '...',
watch: {
'$route' (to, from) {
// react to route changes...
}
}
}
In alternativa, utilizzare la protezione beforeRouteUpdate introdotta in 2.2:
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
Riferimento: https://router.vuejs.org/en/essentials/dynamic-matching.html
beforeRouteUpdate
funziona solo sulla vista che dichiara il metodo e non su qualsiasi componente figlio
In caso, qualcuno sta cercando come farlo in dattiloscritto, ecco la soluzione
@Watch('$route', { immediate: true, deep: true })
onUrlChange(newVal: Route) {
// Some action
}
E sì, come indicato da @Coops di seguito, non dimenticare di includere
import { Watch } from 'vue-property-decorator';
Modifica: Alcalyn ha sottolineato molto bene l'utilizzo del tipo di percorso invece di usarne uno
import { Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { Prop, Watch } from "vue-property-decorator";
any
tipo, potresti voler utilizzare l'interfaccia Route
diimport { Route } from 'vue-router';
Le risposte di cui sopra sono le migliori, ma solo per completezza, quando ci si trova in un componente è possibile accedere all'oggetto della cronologia all'interno di VueRouter con: this. $ Router.history. Ciò significa che possiamo ascoltare i cambiamenti con:
this.$router.listen((newLocation) =>{console.log(newLocation);})
Penso che questo sia utile soprattutto se usato insieme a questo. $ Router.currentRoute.path Puoi controllare di cosa sto parlando posizionando un debugger
istruzioni nel codice e inizia a giocare con la console DevTools di Chrome.
L'osservatore con l'opzione profonda non ha funzionato per me.
Al contrario, utilizzo l' hook aggiornato () che viene eseguito ogni volta che i dati del componente cambiano. Usalo come fai con montato () .
mounted() {
/* to be executed when mounted */
},
updated() {
console.log(this.$route)
}
Per riferimento, visitare la documentazione .
Un'altra soluzione per l'utente dattiloscritto:
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) {
se vuoi supportare i browser più vecchi e non stai usando babel.