ページの問題をリフレッシュスイッチング単一ページのアプリケーションを解決するために適用されるhistory.replaceState方法を覚えておいてください

あなたが知っている前まあ、歴史のAPIを検討し、いくつかの新しいメソッドを追加しましたが、今日は記録し、非常に興奮し、歴史を持つ、完璧なソリューションを小さな問題が発生したか、しませんでした

まず、次のシーンに言及私は問題が発生しました:

2つのページA、Bがあります。

ページが結果であるとき、情報のページにページBのページを送信

そしてA、同じページ内のBは、動的なレンダリングのためのjsのテンプレートを使用してHTMLファイルです

結果ページを動的にレンダリングする場合次に、あなたはページAを更新するたびに表示されますが、実際には、私は確かに、ユーザーが再び提出したくないページBにそれを表示したいのですが、ほとんどの場合、私は実際にユーザーが直接行きたくありませんそれが支払われた場合、それは二次的支払いが発生しますので、情報のページを提出し、

そしてまた、ロジックに誤りがあり、私はページの更新よ、あなたはページに私を聞かせて代わりの表示ページBに尋ねるべきですか?

だから、これは彼らの才能replaceState時間を表示する時間です。


                var stateObject = { result: true }; //可以传递参数
                var title = "Wow Title";
                var newUrl = location.href;
                history.replaceState(stateObject, '', newUrl);
                console.info('history', history);

タイトル転送空の真ん中、ほとんどのブラウザは==それを無視することを選択したので、
stateObjectは、パラメータを渡すことです

可以用 history.state直接获取到

このことは容易になる実際には、このような場合は、渡されただけの結果パラメータであるとき、ページが更新されたとき、それは検出するたびに続いて、接続にページBのページのレンダリングを交換すると、このパラメータの結果が直接表示されていることは事実であります結果ページ。ユーザーがブラウザの[戻る]ボタンをクリックしたときに、それはまた再び提出避けるため、Aのページに戻りません。

おそらく、VUEは、単一ページのアプリケーションはまた、プライマーを覚えて、そして次をしようとする時間を持つように、この方法で達成することができる反応します。

この例では、より抽象的であってもよいし、全体のデモを完了する時間があります

履歴Attach APIを公式サイトの説明アドレスバー

https://developer.mozilla.org/zh-CN/docs/Web/API/History

おすすめ

転載: blog.51cto.com/13496570/2416791
おすすめ