Vue/React シングルページ アプリケーションをリフレッシュなしで復元するソリューション

「../views/Home.vue」から Home をインポートします。

定数ルート = [
  {
    パス: "/home",
    名前: "ホーム",
    コンポーネント: ホーム、
    子供たち： [
      {
        パス: "sub",
        コンポーネント: () =>
          import(/* webpackChunkName: "sub" */ "../views/Sub.vue"),
      },
    ]、
  },
];

デフォルトルートをエクスポートします。

<テンプレート>
  <div class="home">
    <input v-model="入力値" />
    <h3>{{ 入力値 }}</h3>
    <button @click="handleToSub">サブスクライブする</button>
    <ルータービュー @reload="handleReload" />
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "ホーム",
  データ（） {
    戻る {
      入力値: "",
    };
  },
  メソッド: {
    ハンドルToSub() {
      // ルーティング形式は、独立した /sub ではなく、前のルート /home の下のサブに基づいていることに注意してください。
      this.$router.push("/home/sub");
    },

    ハンドルリロード(val) {
      // ここでは、詳細ページでデータを変更したり、console.log("reload", val); を返した後にリストを再度取得するなど、データを再取得するための操作をいくつか実行できます。
    },
  },
  マウント() {
    // サブページが戻り、ライフサイクルは再実行されません console.log("mounted");
  },
};
</スクリプト>

<スタイルスコープ>
。家 {
  位置: 相対的;
}
</スタイル>

<テンプレート>
  <div class="sub">
    <h1>これはサブページです</h1>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  破棄する前に() {
    // カスタムパラメータを渡すことができます。必要ない場合は、これを行う必要はありません。$emit("reload", 123);
  },
};
</スクリプト>

<スタイルスコープ>
.sub {
  位置: 絶対;
  左: 0;
  上: 0;
  幅: 100%;
  高さ: 100%;
  背景色: #fff;
}
</スタイル>

「react-router-dom」から Route をインポートします。

const ルート = () => {
  戻る （
    <>
      ** 最初に親ページを一致させてから子ページを一致させる必要があるため、ここでは正確な値を追加できません*/
      <ルート パス="/home" コンポーネント={lazy(() => import("../views/Home"))} />
    </>
  );
};

デフォルトのルートをエクスポートします。

「react」から React をインポートし、{useEffect、useState} を追加します。
「react-router-dom」から Route、useHistory をインポートします。
「styled-components」からstyledをインポートします。
「./Sub」からSubをインポートします。

const HomeContainer = styled.div`
  位置: 相対的;


const ホーム: React.FC = () => {
  const [入力値、設定入力値] = useState("");
  定数履歴 = useHistory();

  定数handleToSub = () => {
    history.push("/home/sub");
  };

  const handleReload = (val: 数値) => {
    console.log("リロード", val);
  };

  使用効果(() => {
    console.log("マウントされました");
  }, []);

  戻る （
    <ホームコンテナ>
      <入力
        値={入力値}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h3>{入力値}</h3>
      <button onClick={handleToSub}>サブスクライブする</button>
      <ルート
        パス="/home/sub"
        コンポーネント={() => <Sub handleReload={handleReload} />}}
      />
    </ホームコンテナ>
  );
};

デフォルトのホームをエクスポートします。

「react」からReactをインポートします。
「styled-components」からstyledをインポートします。

const サブコンテナ = styled.div`
  位置: 絶対;
  左: 0;
  上: 0;
  幅: 100%;
  高さ: 100%;
  背景色: #fff;


タイプ サブプロパティ = {
  handleReload: (val: number) => void;
};

const Sub: React.FC<SubProps> = ({ handleReload }) => {
  使用効果(() => {
   戻り値 () => handleReload(123);
  }, []);
  
  戻る （
    <サブコンテナ>
      <h1>これはサブページです</h1>
    </サブコンテナ>
  );
};

デフォルトのサブをエクスポートします。