vueプロジェクトリフレッシュページ(provide、inject方式)

vueプロジェクトを開発する時、フレームワークは1つのリフレッシュボタンを必要として、手動でページのレンダリングをリフレッシュして、私達はwindowを知っています.reload()、またはrouter.go(0)はルーティングをリフレッシュし,現在のページに再アクセスできるが,この方法の問題はページが白画面になり,ユーザ体験がうまくいかないことである.

provide、inject方式

リフレッシュが必要なルーティングレベル、でレンダリングされた場所でv-ifでページリフレッシュを制御します.ここでアプリを使います.vue例

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
     
  name: "App",
  //       provide     ，       inject     。
  provide() {
     
    return {
     
      reload: this.reload,
    };
  },
  data() {
     
    return {
     
      //            
      isRouterAlive: true,
    };
  },
  methods: {
     
    reload() {
     
      //   ，   
      this.isRouterAlive = false;
      this.$nextTick(function () {
     
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

サブコンポーネントはreloadメソッドを受信し、リフレッシュをクリックすると呼び出され、ページ全体のリフレッシュ効果を実現する

export default {
     
  name: "HeaderBar",
  inject: ["reload"],
  methods: {
     
    ...mapActions(["handleLogOut"]),
    handleCollpasedChange(state) {
     
      this.$emit("on-coll-change", state);
    },
    handleRefresh() {
     
      this.reload();
    },
  }