Temos router.reload em vue-router?


101

Eu vejo nesta solicitação pull :

  • Adicione um router.reload()

    Recarregue com o caminho atual e chame o gancho de dados novamente

Mas quando tento emitir o seguinte comando de um componente Vue:

this.$router.reload()

Eu recebo este erro:

Uncaught TypeError: this.$router.reload is not a function

Procurei na documentação , mas não encontrei nada relevante. O vue / vue-router fornece alguma funcionalidade como essa?

As versões de software nas quais estou interessado são:

"vue": "^2.1.0",
"vue-router": "^2.0.3",

PS. Eu sei que location.reload()é uma das alternativas, mas estou procurando uma opção Vue nativa.

Respostas:


145

this.$router.go()faz exatamente isso; se nenhum argumento for especificado, o roteador navegará até o local atual, atualizando a página.

observação: a implementação atual do roteador e seus componentes de histórico não marcam o parâmetro como opcional, mas IMVHO é um bug ou uma omissão da parte de Evan You, já que a especificação permite isso explicitamente . Eu preenchi um relatório de problema sobre isso. Se você estiver realmente preocupado com as anotações atuais do TS, basta usar o equivalentethis.$router.go(0)

Quanto a 'por que é assim': gointernamente passa seus argumentos para window.history.go, portanto, é igual a windows.history.go()- o que, por sua vez, recarrega a página, de acordo com o documento MDN .

nota: como ele executa uma recarga "suave" no Firefox normal (não portátil), um monte de peculiaridades podem aparecer se você usá-lo, mas na verdade você precisa de uma recarga real; usar o window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) mencionado pelo OP pode ajudar - certamente resolveu meus problemas no FF.


4
Sim, ele está atualizando a página e não um componente.
EscapeNetscape

<span @click = "() => {this. $ router.go ()}" class = "btn btn-lg btn-danger">
Vsevolod Azovsky

9
Observe que $router.go()aceita um parâmetro, então você deve usá-lo como $router.go(0), o que significa navegar zero páginas de volta no histórico
Dan

1
@Dan FWIW, eu diria o fato de que github.com/vuejs/vue-router/blob/dev/src/index.js#L175 e suas implementações (por exemplo, github.com/vuejs/vue-router/blob/ dev / src / history / html5.js # L40 ) não marcar o parâmetro como opcional é um bug ou uma omissão da parte de Evan You, uma vez que a especificação o permite explicitamente (consulte developer.mozilla.org/en-US/ docs / Web / API / History / go # Parameters ). Eu preenchi um relatório de bug sobre isso @ github.com/vuejs/vue-router/issues/3065 , no entanto.

window.location.reload(forceReload)parece estar obsoleto, mas window.location.reload()está ok.
henon

46

A solução mais simples é adicionar um atributo: key a:

<router-view :key="$route.fullPath"></router-view>

Isso ocorre porque o Vue Router não nota nenhuma mudança se o mesmo componente estiver sendo endereçado. Com a chave, qualquer mudança no caminho irá disparar uma recarga do componente com os novos dados.


1
vuejs.org/v2/api/#key nos documentos oficiais explica indiretamente o mecanismo do atributo especial chave em vue.
Ian Pinto

2
Isso não vai funcionar, porque no cenário que o OP está discutindo, o caminho completo não mudará.
Nick Coad

Funcionou muito bem para mim. Votei esta resposta positivamente.
ak22

27
this.$router.go(this.$router.currentRoute)

Documentos Vue-Router:

Eu verifiquei o repositório vue-router no GitHub e parece que não há mais reload()método. Mas no mesmo arquivo, existe: currentRouteobjeto.

Fonte: vue-router / src / index.js
Docs: docs

get currentRoute (): ?Route {
    return this.history && this.history.current
  }

Agora você pode usar this.$router.go(this.$router.currentRoute)para recarregar a rota atual.

Exemplo simples .

Versão para esta resposta:

"vue": "^2.1.0",
"vue-router": "^2.1.1"

1
Isso não atualizará nenhum dado emSafari
jilen

7
Existe uma maneira de apenas recarregar o componente, sem atualizar a página? A rota deve ser a mesma, digamos '/ users'. Mas quando eu clico no botão Atualizar, ele tem que atualizar a página inteira, sem recarregar a página.
Rajeshwar

7

Use router.go(0)se você usar Typescript e estiver pedindo argumentos para o método go.


5

router.js

routes: [
{
  path: '/',
  component: test,
  meta: {
    reload: true,
  },
}]

main.js

import router from './router';

new Vue({
  render: h => h(App),
  router,
  watch:{
    '$route' (to) {
       if(to.currentRoute.meta.reload==true){window.location.reload()}
   }
 }).$mount('#app')

2

É minha recarga. Por causa de algum navegador muito estranho. location.reloadnão pode recarregar.

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}
<router-view v-if="isRouterAlive"/>

1

Resolva a rota para um URL e navegue na janela com Javascript.

        let r = this.$router.resolve({
        name: this.$route.name, // put your route information in
        params: this.$route.params, // put your route information in
        query: this.$route.query // put your route information in
      });
      window.location.assign(r.href)

Este método substitui o URL e faz com que a página faça uma solicitação completa (atualização) em vez de depender de Vue.router. $ router.go não funciona da mesma forma para mim, embora teoricamente deva funcionar.


1
`<router-link :to='`/products`' @click.native="$router.go()" class="sub-link"></router-link>`

Eu tentei isso para recarregar a página atual.


-1
function removeHash () { 
    history.pushState("", document.title, window.location.pathname
                                          + window.location.search);
}


App.$router.replace({name:"my-route", hash: '#update'})
App.$router.replace({name:"my-route", hash: ' ', params: {a: 100} })
setTimeout(removeHash, 0)

Notas:

  1. E #deve ter algum valor depois disso.
  2. O segundo hash da rota é um espaço, não uma string vazia.
  3. setTimeout, $nextTickpara não manter o url limpo.

-1

Para renderizar novamente, você pode usar no componente pai

<template>
  <div v-if="renderComponent">content</div>
</template>
<script>
export default {
   data() {
      return {
        renderComponent: true,
      };
    },
    methods: {
      forceRerender() {
        // Remove my-component from the DOM
        this.renderComponent = false;

        this.$nextTick(() => {
          // Add the component back in
          this.renderComponent = true;
        });
      }
    }
}
</script>

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.