Czy mamy router.reload w vue-router?

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.

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

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.

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"

Użyj, router.go(0)jeśli używasz Typescript i prosi o argumenty dla metody 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')

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

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.

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

vueObject.$forceUpdate();

dlaczego nie używasz metody forceUpdate?

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.

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>