Czy mamy router.reload w vue-router?

94

Widzę w tym żądaniu pull :

  • Dodać router.reload()

    Wczytaj ponownie aktualną ścieżkę i ponownie wywołaj hak danych

Ale kiedy próbuję wydać następujące polecenie ze składnika Vue:

this.$router.reload()

Otrzymuję ten błąd:

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

Szukałem w dokumentach , ale nie znalazłem nic odpowiedniego. Czy dostawca vue / vue-routera ma taką funkcjonalność?

Interesujące mnie wersje oprogramowania:

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

PS. Wiem, że location.reload()to jedna z alternatyw, ale szukam rodzimej opcji Vue.

Saurabh
źródło

Odpowiedzi:

138

this.$router.go()robi dokładnie to; jeśli nie podano argumentów, router przechodzi do bieżącej lokalizacji, odświeżając stronę.

uwaga: obecna implementacja routera i jego składników historii nie oznacza parametru jako opcjonalnego, ale IMVHO to albo błąd, albo pominięcie ze strony Evana You, ponieważ specyfikacja wyraźnie na to zezwala . Złożyłem raport dotyczący tego problemu. Jeśli naprawdę interesują Cię aktualne adnotacje TS, po prostu użyj ich odpowiednikathis.$router.go(0)

Co do „dlaczego tak jest”: gowewnętrznie przekazuje swoje argumenty do window.history.go, więc jest równe windows.history.go()- co z kolei ładuje ponownie stronę, zgodnie z dokumentem MDN .

uwaga: ponieważ wykonuje to "miękkie" przeładowanie na zwykłym pulpicie (nieprzenośnym) Firefoksie, może pojawić się kilka dziwnych dziwactw, jeśli go użyjesz, ale w rzeczywistości potrzebujesz prawdziwego przeładowania; użycie window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) wspomnianego przez OP może pomóc - z pewnością rozwiązało moje problemy na FF.


źródło
4
Tak, odświeża stronę, a nie ładuje ponownie komponent.
EscapeNetscape
<span @click = "() => {this. $ router.go ()}" class = "btn btn-lg btn-danger">
Vsevolod Azovsky
6
Zauważ, że $router.go()akceptuje jeden parametr, więc powinieneś go używać jako $router.go(0), co oznacza, że ​​nie cofasz się do żadnych stron w historii
Dan,
1
@Dan FWIW, powiedziałbym, że zarówno github.com/vuejs/vue-router/blob/dev/src/index.js#L175, jak i jego implementacje (np. Github.com/vuejs/vue-router/blob/ dev / src / history / html5.js # L40 ) nie oznaczaj parametru jako opcjonalnego, jest to błąd lub pominięcie ze strony Evana You, ponieważ specyfikacja wyraźnie na to zezwala (patrz developer.mozilla.org/en-US/ docs / Web / API / History / go # Parametry ). Złożyłem jednak raport o błędzie na github.com/vuejs/vue-router/issues/3065 .
window.location.reload(forceReload)wydaje się być przestarzała, ale window.location.reload()jest w porządku.
Hénon
42

Najprostszym rozwiązaniem jest dodanie atrybutu: key do:

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

Dzieje się tak, ponieważ Vue Router nie zauważa żadnej zmiany, jeśli adresowany jest ten sam komponent. Za pomocą klawisza każda zmiana ścieżki spowoduje ponowne załadowanie komponentu nowymi danymi.

Ian Pinto
źródło
1
vuejs.org/v2/api/#key w oficjalnych dokumentach pośrednio wyjaśnia mechanizm kluczowego atrybutu specjalnego w vue.
Ian Pinto
1
To nie zadziała, ponieważ w scenariuszu PO omawia pełną ścieżkę nie ulegnie zmianie.
Nick Coad
26
this.$router.go(this.$router.currentRoute)

Dokumentacja Vue-Router:

Sprawdziłem repozytorium vue-router na GitHubie i wygląda na to, że nie ma już reload()metody. Ale w tym samym pliku jest: currentRouteobiekt.

Źródło: vue-router / src / index.js
Docs: docs

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

Teraz możesz użyć this.$router.go(this.$router.currentRoute)do przeładowania aktualnej trasy.

Prosty przykład .

Wersja dla tej odpowiedzi:

"vue": "^2.1.0",
"vue-router": "^2.1.1"
t_dom93
źródło
1
To nie odświeży żadnych danych w dniuSafari
jilen
7
Czy istnieje sposób na ponowne załadowanie komponentu bez odświeżania strony? Trasa powinna być taka sama, powiedzmy „/ users”. Ale kiedy klikam przycisk odświeżania, musi odświeżyć całą stronę, bez ponownego ładowania strony.
Rajeshwar
6

Użyj, router.go(0)jeśli używasz Typescript i prosi o argumenty dla metody go.

StvnSpnz
źródło
4

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')
Alfarouq
źródło
2

To moje przeładowanie. Z powodu jakiejś przeglądarki jest bardzo dziwna. location.reloadnie można przeładować.

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}
<router-view v-if="isRouterAlive"/>
LiHao
źródło
1

Wyznacz trasę do adresu URL i przejdź przez okno za pomocą 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)

Ta metoda zastępuje adres URL i powoduje, że strona wykonuje pełne żądanie (odświeżanie) zamiast polegać na Vue.router. $ router.go nie działa u mnie tak samo, chociaż teoretycznie tak powinno.

Za imię
źródło
1
`<router-link :to='`/products`' @click.native="$router.go()" class="sub-link"></router-link>`

Próbowałem tego w celu ponownego załadowania bieżącej strony.

Oferta
źródło
0
vueObject.$forceUpdate();

dlaczego nie używasz metody forceUpdate?

Alireza Mortezaei
źródło
-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)

Uwagi:

  1. A po nim #musi mieć jakąś wartość.
  2. Drugi skrót trasy to spacja, a nie pusty ciąg.
  3. setTimeout, $nextTickaby nie utrzymywać czystego adresu URL.
Justin Alexander
źródło
-2

Do ponownego wydania można użyć w komponencie nadrzędnym

<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>
Богдан Чернявський
źródło