web-dev-qa-db-fra.com

Avons-nous router.reload dans la vue-router?

Je vois dans ce demande de pull :

  • Ajouter un router.reload()

    Rechargez avec le chemin actuel et appelez à nouveau le crochet de données

Mais lorsque j'essaie d'exécuter la commande suivante à partir d'un composant Vue:

this.$router.reload()

Je reçois cette erreur:

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

J'ai cherché dans le docs , mais je n'ai rien trouvé de pertinent. Est-ce que vue/vue-routeur fournit des fonctionnalités comme celle-ci?

Les versions de logiciel qui m'intéressent sont:

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

PS Je sais que location.reload() est l'une des alternatives, mais je recherche une option native Vue.

vue.jsvue-routervuejs2
39
Saurabh

this.$router.go() fait exactement cela; si aucun argument n'est spécifié, le routeur navigue vers l'emplacement actuel et actualise la page.

Quant à "pourquoi est-il ainsi": go passe ses arguments en interne à window.history.go, de sorte qu'il est égal à windows.history.go() - qui, à son tour, recharge la page, comme indiqué par Doc MDN .

remarque: étant donné que cela exécute un rechargement "logiciel" sur un ordinateur de bureau Firefox (non-portable) classique, de nombreuses bizarreries peuvent apparaître si vous l'utilisez, mais vous avez en fait besoin d'un vrai rechargement. en utilisant le window.location.reload(true); ( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) mentionné par OP à la place peut aider - il a certainement résolu mes problèmes sur FF.

59
vaxquis

La solution la plus simple consiste à ajouter un attribut: key à:

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

En effet, Vue Router ne remarque aucun changement si le même composant est en cours d'adressage. Avec la clé, toute modification du chemin déclenchera un rechargement du composant avec les nouvelles données.

20
Ian Pinto

Je vérifie le repo vue-router sur GitHub et il semble qu'il n'y ait plus de méthode reload(). Mais dans le même fichier, il y a: currentRoute object.

Source: vue-router/src/index.js
Docs: docs

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

Vous pouvez maintenant utiliser this.$router.go(this.$router.currentRoute) pour recharger l'itinéraire actuel.

Simple exemple .

Version pour cette réponse:

"vue": "^2.1.0",
"vue-router": "^2.1.1"
19
t_dom93

Pour le rendu, vous pouvez utiliser dans le composant parent

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

C'est mon rechargement. À cause de certains navigateurs très bizarres. location.reload ne peut pas recharger.

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}

<router-view v-if="isRouterAlive"/>
0
LiHao