Temos router.reload em vue-router?

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.

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.}

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.

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"

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

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

É 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"/>

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.

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

Eu tentei isso para recarregar a página atual.

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.

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>

vueObject.$forceUpdate();

por que você não usa o método forceUpdate?