Vuejs: Evento na mudança de rota


134

Na minha página principal, tenho listas suspensas que aparecem v-show=showclicando no link @click = "show=!show"e quero definirshow=false quando altero a rota. Aconselhe-me, por favor, como perceber isso.

Respostas:


266

Configure um observador no $routecomponente como este:

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

Isso observa as alterações de rota e, quando alterado, define showcomo false


11
E use $route: function(to, from) {se você deseja oferecer suporte a navegadores mais antigos e não está usando o babel.
Paul LeBeau

mas como posso reagir imediatamente para rotear parâmetros ou consultar parâmetros se o componente está sendo instanciado / inicializado primeiro? Eu faria isso no gancho do ciclo de vida created () ou mounted () ou beforeRouteUpdate ou onde?
user2774480 25/02

37

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


6
Uma nota: beforeRouteUpdatesó funciona na visão de que declara o método e não em qualquer componente filho
Jean Valjean

30

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';

3
Bom trabalho antecipando esta questão. +1
Rod Hartzell

1
Não se esqueça de incluir na importação: import { Prop, Watch } from "vue-property-decorator";
Coops

1
Levei horas para finalmente perceber isso, alguma documentação por aí?
Ayyash

1
Doc semelhante pode ser encontrado: router.vuejs.org/api/#the-route-object Além disso, em vez de usar o anytipo, você pode usar a interface Routedeimport { Route } from 'vue-router';
Alcalyn

3

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.


3

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 .


0

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 {}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.