Haben wir router.reload in vue-router?

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.

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

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.

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"

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

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

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

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.

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

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

vueObject.$forceUpdate();

Warum verwenden Sie nicht die forceUpdate-Methode?

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.

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>