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

Question 1

追加する router.reload()

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

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

this.$router.reload()

このエラーが発生します：

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

ドキュメントを検索しましたが、関連するものが見つかりませんでした。vue / vue-routerプロバイダーはこのような機能を提供していますか？

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

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

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

Question 2

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

_{注：ルーターとその履歴コンポーネントの現在の実装では、パラメーターがオプションとしてマークされていませんが、IMVHOは、仕様で明示的に許可されているため、 EvanYou側のバグまたは省略のいずれかです。私はそれについての問題報告を提出しました。現在のTSアノテーションに本当に関心がある場合は、同等のものを使用してくださいthis.$router.go(0)}

'なぜそうなのか'：go内部的に引数をwindow.history.goに渡すので、それに等しい-MDN docwindows.history.go()に従って、ページをリロードします。

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

Question 3

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

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

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

Question 4

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

Vue-Router Docs：

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

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

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

今、あなたは使用することができます this.$router.go(this.$router.currentRoute)、現在のルートのリロードに。

簡単な例。

この回答のバージョン：

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

Question 5

使用して、router.go(0)あなたは活字体を使用している場合、それが行く方法の引数を求めています。

Question 6

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

Question 7

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

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

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

Question 8

URLへのルートを解決し、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)

スニペットを展開

このメソッドはURLを置き換え、Vue.routerに依存するのではなく、ページに完全なリクエスト（更新）を実行させます。$ router.goは、理論的には機能するはずですが、私にとっては同じようには機能しません。

Question 9

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

現在のページをリロードするためにこれを試しました。

Question 10

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)

ノート：

そしてその #その後に何らかの価値なければなりません。
2番目のルートハッシュはスペースであり、空の文字列ではありません。
setTimeout、$nextTickURLをクリーンに保たないため。

Question 11

再レンダリングの場合、親コンポーネントで使用できます

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

Question 12

vueObject.$forceUpdate();

forceUpdateメソッドを使用してみませんか？