vueルーティングコンポーネント強制リフレッシュ&キャッシュ更新

最近vueでバックエンド管理ページを作成するときに、サブルーティングのページをリフレッシュする必要があるという問題が発生しました.
 
背景:
従来のネストiframeのページ実装は特に簡単で、iframeを置き換えるリンクを与えるだけでよい.
 
vueは、更新:keyによって更新をトリガーすることを考慮できます(すべてのコンポーネントに適用されます).
`keyの特殊な属性は主にVueの仮想DOMアルゴリズムに用いられて、新旧のnodesが対比する時VNodes`を識別します
 

 
コンポーネント間操作に関連するため、vuexで管理できるkeyを追加します.
 
一般的に、このような処理はこの需要を解決することができる.
ひとまずここでは方法①と呼ぶ
方法③:this.$router.push
以下に、別の方法(方法②)が複雑であり、使用されるAPIは以下の通りである.
 

1.vm.$forceUpdate()

2.vm.watch

3.mixins

4.vuex

詳細:

1.vm.$forceUpdate()この関数は、コンポーネントのリフレッシュに特化しています(2018/11/02に更新されました:現在のコンポーネント自体とslotサブコンポーネントのみが更新されます).vm自体の状態をリセットし、プログラムをライフサイクル

に再実行させると理解できます.

2.vm.watchは、あるdata、computedの中の属性を傍受し、変動が発生すると対応するコールバック

を実行する.

3.mixinsはVUEコンポーネントに構成を混入ためのAPIであり、元のコンポーネントに対応する同名構成が存在する場合、2つの同名構成のプログラム

が実行される.

4.vuexステータス管理のvueツールで、複数の同級サブコンポーネントのデータ通信を設計する際によく使われる

 
プロセス:

vuexにstate

を追加

プログラムルートコンポーネントの【ファイル】にJSON構成Configを追加し、

Configのcomputedは1つの変数Aをプラスして、Aをvuexのstateに依存させて、

同時にコンフィグにwatch、watch変数A、Aが変動した場合watch対応の関数this.$forceUpdate()[矢印関数を使用しないでください]

は、ルートコンポーネントmixinsを与えることによって、各コンポーネントにリスニングおよびリフレッシュ

を追加することができる.
警告:`混入オブジェクトをグローバルに登録することもできます.使用に注意!グローバルブレンドオブジェクトを使用すると、その後作成されたすべてのVueインスタンス`に影響します.
公式サイト:https://cn.vuejs.org/v2/guide/mixins.html#%E5%85%A8%E5%B1%80%E6%B7%B7%E5%85%A5
 
注意:もしあなたのルートがkeep-liveで包まれていたら、この方法は無効になります.例えば:

router-view >

keep-aliveは特殊なラベルで、keyを設定しても中身はリフレッシュされません.keep-aliveを動的に更新することで、公式サイトを知ることができます.
 
このような状況に遭遇したら、別の方法を試してみることができます.暴力的で副作用があり、巧みな処理方法です(方法③)
 
カスタムqueryを最も追加したり、定義queryを減らしたりしてリフレッシュします!
もしあなたのページの状態がvuexで制御されているならば、この方法を使うのは特に便利で、ページがフラッシュすることはありません.

if(this.$route.query.keepalivekeepalive){

                let tmp=Object.assign({},this.$route,{query:{}});

                this.$router.push(tmp);

 }

 else{

                let tmp=Object.assign({},this.$route,{query:{"keepalivekeepalive":true}});

                this.$router.push(tmp);

 }

 
更新(18/07/25)
keepAliveを使用している場合は、keepAliveのinclude(キャッシュ内容を動的に管理する)属性を言わざるを得ません.

vue 2.1.0以降はincludeを配列として使用できますが、router-viewで切り替えた単一ページコンポーネントにnameが書かれていない場合は無効です.
 
更新(19/05/04)
方法③最も簡単な時にkeepliveを考慮しないで、このような操作方式は以前からこのことがあることを知っていたはずですが、なぜ追加しなかったのか分かりませんが、

  // tabs,     
      tabsRefreshCurrentHandle () {
        var tab = this.$route
        this.removeTabHandle(tab.name)
        this.$nextTick(() => {
          this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
        })
      }