Haben wir router.reload in vue-router?

94

Ich sehe in dieser Pull-Anfrage :

  • Füge hinzu ein router.reload()

    Laden Sie mit dem aktuellen Pfad neu und rufen Sie den Daten-Hook erneut auf

Aber wenn ich versuche, den folgenden Befehl von einer Vue-Komponente auszugeben:

this.$router.reload()

Ich erhalte diesen Fehler:

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

Ich habe in den Dokumenten gesucht , aber nichts Relevantes gefunden. Bietet vue / vue-router solche Funktionen an?

Die Softwareversionen, an denen ich interessiert bin, sind:

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

PS. Ich weiß, dass dies location.reload()eine der Alternativen ist, aber ich suche nach einer nativen Vue-Option.

Saurabh
quelle

Antworten:

138

this.$router.go()macht genau das; Wenn keine Argumente angegeben werden, navigiert der Router zum aktuellen Speicherort und aktualisiert die Seite.

Hinweis: Die aktuelle Implementierung des Routers und seiner Verlaufskomponenten markiert den Parameter nicht als optional, aber IMVHO ist entweder ein Fehler oder eine Auslassung von Evan You, da die Spezifikation dies ausdrücklich zulässt . Ich habe einen Problembericht darüber eingereicht. Wenn Sie sich wirklich mit aktuellen TS-Anmerkungen beschäftigen, verwenden Sie einfach das Äquivalentthis.$router.go(0)

Was 'warum ist es so?': goÜbergibt seine Argumente intern an window.history.go, also ist es gleich windows.history.go()- was wiederum die Seite gemäß MDN-Dokument neu lädt .

Hinweis: Da dies ein "weiches" Neuladen auf einem normalen Desktop-Firefox (nicht portierbar) ausführt, kann es bei Verwendung zu einer Reihe seltsamer Macken kommen, aber tatsächlich ist ein echtes Neuladen erforderlich. Die Verwendung des von OP erwähnten window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) kann helfen - es hat sicherlich meine Probleme mit FF gelöst.


quelle
4
Ja, es wird eine Seitenaktualisierung durchgeführt und kein erneutes Laden der Komponenten.
EscapeNetscape
<span @click = "() => {this. $ router.go ()}" class = "btn btn-lg btn-gefahr">
Vsevolod Azovsky
6
Beachten Sie, dass $router.go()ein Parameter akzeptiert wird, daher sollten Sie ihn als verwenden $router.go(0), was bedeutet , dass Sie null Seiten zurück im Verlauf navigieren
Dan
1
@ Dan FWIW, ich würde sagen, dass sowohl github.com/vuejs/vue-router/blob/dev/src/index.js#L175 als auch seine Implementierungen (z. B. github.com/vuejs/vue-router/blob/) dev / src / history / html5.js # L40 ) Markieren Sie den Parameter nicht als optional. Dies ist entweder ein Fehler oder eine Auslassung von Evan You, da die Spezifikation dies ausdrücklich zulässt (siehe developer.mozilla.org/en-US/). docs / Web / API / History / go # Parameter ). Ich habe jedoch einen Fehlerbericht unter @ github.com/vuejs/vue-router/issues/3065 eingereicht .
window.location.reload(forceReload)scheint veraltet zu sein, ist aber window.location.reload()in Ordnung.
Henon
42

Die einfachste Lösung besteht darin, Folgendes hinzuzufügen: ein Schlüsselattribut:

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

Dies liegt daran, dass Vue Router keine Änderung bemerkt, wenn dieselbe Komponente angesprochen wird. Mit dem Schlüssel löst jede Änderung des Pfads ein erneutes Laden der Komponente mit den neuen Daten aus.

Ian Pinto
quelle
1
vuejs.org/v2/api/#key in den offiziellen Dokumenten erklärt indirekt den Mechanismus des Schlüssel-Spezialattributs in vue.
Ian Pinto
1
Dies funktioniert nicht, da sich in dem vom OP diskutierten Szenario der vollständige Pfad nicht ändert.
Nick Coad
27
this.$router.go(this.$router.currentRoute)

Vue-Router-Dokumente:

Ich habe das Vue-Router-Repo auf GitHub überprüft und es scheint, dass es keine reload()Methode mehr gibt. In derselben Datei befindet sich jedoch: currentRouteObjekt.

Quelle: vue-router / src / index.js Dokumente
: Dokumente

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

Jetzt können Sie die this.$router.go(this.$router.currentRoute)aktuelle Route neu laden.

Einfaches Beispiel .

Version für diese Antwort:

"vue": "^2.1.0",
"vue-router": "^2.1.1"
t_dom93
quelle
1
Dies wird keine Daten aufSafari
jilen
7
Gibt es eine Möglichkeit, die Komponente einfach neu zu laden, ohne die Seite zu aktualisieren? Die Route sollte dieselbe sein, sagen wir '/ users'. Aber wenn ich auf die Schaltfläche "Aktualisieren" klicke, muss die gesamte Seite aktualisiert werden, ohne die Seite neu zu laden.
Rajeshwar
6

Verwenden router.go(0)Sie diese Option, wenn Sie Typescript verwenden und Argumente für die go-Methode gefragt werden.

StvnSpnz
quelle
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
quelle
2

Es ist mein Nachladen. Wegen eines Browsers sehr komisch. location.reloadkann nicht neu laden.

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

Lösen Sie die Route zu einer URL auf und navigieren Sie mit Javascript durch das Fenster.

        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)

Diese Methode ersetzt die URL und bewirkt, dass die Seite eine vollständige Anforderung (Aktualisierung) ausführt, anstatt sich auf Vue.router zu verlassen. $ router.go funktioniert bei mir nicht gleich, obwohl es theoretisch so sein soll.

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

Ich habe dies versucht, um die aktuelle Seite neu zu laden.

Ein Gebot
quelle
0
vueObject.$forceUpdate();

Warum verwenden Sie nicht die forceUpdate-Methode?

Alireza Mortezaei
quelle
-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)

Anmerkungen:

  1. Und das #muss einen Wert danach haben.
  2. Der zweite Routen-Hash ist ein Leerzeichen, keine leere Zeichenfolge.
  3. setTimeout, $nextTickum die URL nicht sauber zu halten.
Justin Alexander
quelle
-2

Zum erneuten Rendern können Sie in der übergeordneten Komponente verwenden

<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>
Богдан Чернявський
quelle