h 5 vueタイトルバー後退ボタン実現

2265 ワード

理論的にweb開発をするには、ブラウザが提供しているため、自分で戻るボタンを作る必要はありません.しかし、極端な環境では、さまざまな客観的な環境と条件、不可抗力のため、やはり戻るボタンが必要です.この場合、ブラウザをシミュレートして戻るボタンの機能を実現する必要があります.
最近、h 5ページを作るにはappの内部に埋め込む必要があります.appがh 5の2級メニューにアクセスするときは、タイトルバーに後退ボタンを表示する必要があります.また、トップページに戻ると、後退ボタンが消えてしまいます.その中にはwindowを使うなど、多くの案が考えられています.history.lengthは判断しますが、前のページに戻るとwindowに気づきました.history.lengthは応答の減一がなくdocumentに変えようとした.refererで判断したがvue-routerでdocument.refererはいつも空いていますがdocumentからrefererでインスピレーションを得たrefererはページのソースの意味を表し、自分がdocumentを実現すれば.refererでいいのではないでしょうか、vue-routerのafterEach機能を利用して、ページソースを追加し、同時にページ初期化時にそのページのページソースが空かどうかを判断し、空でなければ後退ボタンを表示し、
使用方法:
      app.router.afterEach((to, from) => {
        BrowserBack.save(route.name);
      })
     initBackState() {
        let isHome = BrowserBack.isHome();
        if (!isHome) {
          this.backState = true;
        } else {
          this.backState = false;
        }
      },
      back() {
        BrowserBack.back();
      }

注意:isHome状態の取得を使用する場合は、settimeout遅延処理を使用すると、インタフェースがロードされていないため、事前に呼び出される可能性が高いため、次のようになります.
window.setTimeout(() => {
    this.initBackState();
}, 0);

ここでは主にソースページとwindowに基づいています.historyは、ページがリフレッシュされた場合にwindow.historyは増加しません.新しいページにジャンプしたり、アドレスバーに新しいページを入力したりしてこそwindowが発生します.historyは増加して、ここで私はただ新しいページにジャンプするhistoryの問題だけを考慮して、アドレスバーで新しいページを入力する行為(このような情況はとても普遍的で、例えばappの中でプッシュを受け取って、それから新しいページを開きます)のため、理論的にはこれは新しいページで、戻るボタンを持つべきではありませんて、これは応用自身の角度から、したがって、アドレスバーにページジャンプを入力して戻りボタンを表示しない場合は、ジャンプ前に履歴をクリアすることが望ましい.
github:https://github.com/zw1371/dm-browser-back