Vueでのリフレッシュのいくつかの方法

1333 ワード

1.シーン
リストの処理では、データを削除したり、新しいデータを追加したりした後、現在のページを再リフレッシュする必要があることがよくあります.
2.問題
1.vue-routerで現在のページに再ルーティングし、ページはリフレッシュされません.
2.window.reload(),またはrouter.go(0)でリフレッシュした場合、ブラウザ全体が再ロードされ、点滅し、体験が悪い
3.解決方法
provide/inject組合せ
役割:1つの祖先コンポーネントがすべての子孫子孫に依存を注入することを許可します.コンポーネントの階層がどれだけ深くても、上下流関係が成立する時間内に常に有効になります.
app.vueに追加:




    export default {
        provide () {    //      provide     ,       inject     。
            return {
                reload: this.reload
            }
        },
        data() {
          return {
              isRouterAlive : true
          };
        },
        methods: {
            reload () {
                this.isRouterAlive = false;            //   ,
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //   
                })
            }
        }
    }




reloadが必要なページに追加:
inject:['reload'], //  App  reload  
this.reload();