web-dev-qa-db-ja.com

vue-routerにrouter.reloadがありますか？

私はこれを見る プルリクエスト ：

  • router.reload()を追加

    現在のパスでリロードし、データフックを再度呼び出します

しかし、Vueコンポーネントから次のコマンドを発行しようとすると：

this.$router.reload()

私はこのエラーを受け取ります：

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

docs で検索しましたが、関連するものは見つかりませんでした。 vue/vue-routerプロバイダーはこのような機能を備えていますか？

私が興味を持っているソフトウェアのバージョンは次のとおりです。

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

PS。 location.reload()は選択肢の1つですが、ネイティブVueオプションを探しています。

vue.jsvue-routervuejs2
39
Saurabh

this.$router.go()はまさにこれを行います。引数が指定されていない場合、ルーターは現在の場所に移動してページを更新します。

「理由」について：goは内部的にwindow.history.goに引数を渡すので、windows.history.go()と同じです。つまり、 MDN doc 。

注：これは通常のデスクトップ（移植性のない）Firefoxで「ソフト」リロードを実行するため、使用すると実際にはリロードが必要な奇妙な癖がたくさん現れることがあります。代わりにOPで言及されているwindow.location.reload(true);（ https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ）を使用すると役立つ場合があります-それは確かに解決しましたFFでの私の問題。

59
vaxquis

最も簡単な解決策は、：key属性を追加することです：

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

これは、同じコンポーネントがアドレス指定されている場合、Vueルーターは変更を認識しないためです。キーを使用すると、パスを変更すると、新しいデータでコンポーネントがリロードされます。

20
Ian Pinto

GitHubでvue-routerリポジトリを確認しましたが、reload()メソッドはもうないようです。ただし、同じファイルにはcurrentRouteオブジェクトがあります。

ソース： vue-router/src/index.js
ドキュメント： docs

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

現在、this.$router.go(this.$router.currentRoute)を使用して現在のルートをリロードできます。

シンプル 例 。

この回答のバージョン：

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

再レンダリングには、親コンポーネントで使用できます

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

それは私のリロードです。一部のブラウザは非常に奇妙です。 location.reloadをリロードできません。

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

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