Respostas:
Configure um observador no $route
componente como este:
watch:{
$route (to, from){
this.show = false;
}
}
Isso observa as alterações de rota e, quando alterado, define show
como false
Se você estiver usando a v2.2.0, haverá mais uma opção disponível para detectar alterações nas rotas $.
Para reagir às alterações de parâmetros no mesmo componente, você pode simplesmente observar o objeto $ route:
const User = {
template: '...',
watch: {
'$route' (to, from) {
// react to route changes...
}
}
}
Ou use o protetor beforeRouteUpdate apresentado no 2.2:
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
Referência: https://router.vuejs.org/en/essentials/dynamic-matching.html
beforeRouteUpdate
só funciona na visão de que declara o método e não em qualquer componente filho
Apenas caso alguém esteja procurando como fazê-lo em texto datilografado, aqui está a solução
@Watch('$route', { immediate: true, deep: true })
onUrlChange(newVal: Route) {
// Some action
}
E sim, como mencionado por @Coops abaixo, não esqueça de incluir
import { Watch } from 'vue-property-decorator';
Edit: Alcalyn fez um bom ponto de usar o tipo de rota em vez de usar qualquer
import { Watch } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { Prop, Watch } from "vue-property-decorator";
any
tipo, você pode usar a interface Route
deimport { Route } from 'vue-router';
As respostas acima são as melhores, mas apenas para completar, quando você está em um componente, pode acessar o objeto de história dentro do VueRouter com: this. $ Router.history. Isso significa que podemos ouvir as alterações com:
this.$router.listen((newLocation) =>{console.log(newLocation);})
Eu acho que isso é útil principalmente quando usado junto com isso. $ Router.currentRoute.path Você pode verificar o que estou falando sobre como colocar um debugger
instruções no seu código e comece a jogar com o Chrome DevTools Console.
O observador com a opção profunda não funcionou para mim.
Em vez disso, uso o gancho do ciclo de vida atualizado (), que é executado toda vez que os dados do componente são alterados. Apenas use-o como você faz com o mount () .
mounted() {
/* to be executed when mounted */
},
updated() {
console.log(this.$route)
}
Para sua referência, visite a documentação .
Outra solução para o usuário datilografado:
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 você deseja oferecer suporte a navegadores mais antigos e não está usando o babel.