Avons-nous router.reload dans vue-router?

Je vois dans cette pull request :

• Ajouter un router.reload()

  Recharger avec le chemin actuel et appeler à nouveau le crochet de données

Mais lorsque j'essaye d'émettre la commande suivante à partir d'un composant Vue:

this.$router.reload()

J'obtiens cette erreur:

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

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

Les versions logicielles qui m'intéressent sont:

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

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

this.$router.go()fait exactement cela; si aucun argument n'est spécifié, le routeur accède à l'emplacement actuel, actualisant la page.

_{Remarque: l' implémentation actuelle du routeur et de ses composants d'historique ne marque pas le paramètre comme facultatif, mais à mon humble avis, c'est soit un bogue, soit une omission de la part d'Evan You, puisque la spécification le permet explicitement . J'ai déposé un rapport de problème à ce sujet. Si vous êtes vraiment préoccupé par les annotations TS actuelles, utilisez simplement l'équivalentthis.$router.go(0)}

Quant à «pourquoi est-il ainsi»: gopasse en interne ses arguments à window.history.go, donc son égal à windows.history.go()- qui, à son tour, recharge la page, selon la doc MDN .

_{note: puisque ceci exécute un rechargement "doux" sur Firefox de bureau (non portable) normal, un tas de bizarreries étranges peut apparaître si vous l'utilisez mais en fait vous avez besoin d'un vrai rechargement; utiliser le window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) mentionné par OP à la place peut aider - cela a certainement résolu mes problèmes sur FF.}

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 adressé. Avec la clé, toute modification du chemin déclenchera un rechargement du composant avec les nouvelles données.

this.$router.go(this.$router.currentRoute)

Documentation Vue-Router:

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

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

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

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

Exemple simple .

Version pour cette réponse:

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

À utiliser router.go(0)si vous utilisez Typescript et qu'il demande des arguments pour la méthode 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')

C'est ma recharge. À cause de certains navigateurs très bizarres. location.reloadimpossible de recharger.

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

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

Résolvez la route vers une URL et naviguez dans la fenêtre avec 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)

Cette méthode remplace l'URL et oblige la page à faire une requête complète (actualisation) plutôt que de s'appuyer sur Vue.router. $ router.go ne fonctionne pas de la même manière pour moi même si c'est théoriquement censé le faire.

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

J'ai essayé ceci pour recharger la page actuelle.

vueObject.$forceUpdate();

pourquoi n'utilisez-vous pas la méthode 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)

Remarques:

1. Et le #doit avoir une certaine valeur après cela.
2. Le second hachage d'itinéraire est un espace, pas une chaîne vide.
3. setTimeout, $nextTickpour ne pas garder l'url propre.

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>