vue のシングルページ アプリケーションでのフロントエンド ルーティングの使用方法の詳細な説明

今回は、vue シングルページ アプリケーションのフロントエンド ルーティングの使用方法について詳しく説明します。vue シングルページ アプリケーションのフロントエンド ルーティングを使用する際の 注意事項 は何ですか?見てください。

前に書きました: 通常、SPA でフロントエンド ルーティングを実装するには 2 つの方法があります:

1. window.history

2. location.hash

以下では、これら 2 つのメソッドの実装方法を紹介します

一.history

1. 履歴の基本的な概要

window.history オブジェクトには、ブラウザーの履歴が含まれています。 History は、SPA フロントエンド ルーティングを実装するための主流のメソッドです。

1. history.back() - ブラウザの [戻る] ボタンをクリックするのと同じです。

2. history.forward() -ブラウジングと同じ ブラウザのボタンをクリックすることは進むと同じです

3. history.go(n) - 整数をパラメータとして受け取り、その整数で指定されたページに移動します。たとえば、 go(1) は同等です。 forward()、go(-1)はback()、go(0)は現在のページを更新することに相当します

4. 移動した位置がアクセス履歴の境界を超える場合、上記の3つのメソッドは実行されませんエラーを報告しますが、サイレントに失敗します

HTML5 では、

history オブジェクト PushState() メソッドと replaceState() メソッドが提案されており、URL が変更されたかのように、履歴スタックにデータを追加するために使用できます。以前は、URL 変更履歴スタックのみが変更されました)。そのため、非常に優れています。シミュレーションされた閲覧履歴と前方および後方へのシミュレーションは、この原則に基づいて実装されるようになりました。

2.history.pushState

pushState(stateObj, title, url) メソッドは、データを履歴スタックに書き込みます。その最初のパラメータは書き込まれるデータ オブジェクト (640kB 以下) で、2 番目のパラメータは次のとおりです。ページのタイトル、3 番目のパラメータは URL (相対パス) です。

1. stateObj: 指定された URL に関連する状態オブジェクト。popstate イベントがトリガーされると、このオブジェクトは

   コールバック関数 に渡されます。このオブジェクトが必要ない場合は、ここに null を入力できます。

2. title: 新しいページのタイトルですが、現在すべてのブラウザはこの値を無視するため、ここに null を入力できます。

3. url: 新しい URL は現在のページと同じドメイン内にある必要があります。ブラウザのアドレス バーにこの URL が表示されます。

pushState については注意すべき点がいくつかあります:

pushState メソッドはページの更新をトリガーしません。履歴オブジェクトが変更されるだけであり、アドレス バーは前方や後方などのイベントが発生した場合にのみ反応します。 (back() や forward() など)

ここの URL は、悪意のあるスクリプトが他の Web サイトの URL を模倣してユーザーを欺くことを防ぐために、同一生成元ポリシーによって制限されているため、同一生成元ポリシーに違反すると、エラーが報告されます

3 .history.replaceState

replaceState(stateObj, title, url) PushStateとの違いは、閲覧履歴の現在のレコードを書き込むのではなく、置換および変更することです。残りはまったく同じです。 PushState

4と同じ。popstateイベント

の定義:同じドキュメントの閲覧履歴(つまり、履歴オブジェクト)が変更されるたびに、popstateイベントがトリガーされます。

注: このイベントは、pushState メソッドまたは replaceState メソッドを呼び出しただけではトリガーされません。ユーザーがブラウザーの「戻る」ボタンと「進む」ボタンをクリックした場合、または

JavaScript を使用して 戻る、進む、および go メソッドを呼び出した場合にのみトリガーされます。 。また、このイベントは同じドキュメントのみを対象とします。閲覧履歴が切り替わり、異なるドキュメントが読み込まれた場合、このイベントはトリガーされません。

使用法: 使用する場合、popstate イベントのコールバック関数を指定できます。このコールバック関数のパラメーター

はイベント オブジェクトであり、その state 属性は、現在の URL の PushState メソッドと replaceState メソッドによって提供される状態オブジェクト (つまり、これら 2 つのメソッドの最初のパラメーター) を指します。

5.history はスパ フロントエンド ルーティング コードを実装します

<a class="api a">a.html</a>
<a class="api b">b.html</a>
 // 注册路由
  document.querySelectorAll('.api').forEach(item => {
   item.addEventListener('click', e => {
    e.preventDefault();
    let link = item.textContent;
    if (!!(window.history && history.pushState)) {
     // 支持History API
     window.history.pushState({name: 'api'}, link, link);
    } else {
     // 不支持,可使用一些Polyfill库来实现
    }
   }, false)
  });
  // 监听路由
  window.addEventListener('popstate', e => {
   console.log({
    location: location.href,
    state: e.state
   })
  }, false)

popstate リスニング関数で出力される e.state は、history.pushState() に渡される最初のパラメータです。ここでは、それは {name: 'api' }です

二.Hash

1.Hash基本介绍

url 中可以带有一个 hash http://localhost:9000/#/a.html

window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：

1. 直接更改浏览器地址，在最后面增加或改变#hash；

2. 通过改变location.href或location.hash的值；

3. 通过触发点击带锚点的链接；

4. 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

2.Hash实现spa前端路由代码

  // 注册路由
  document.querySelectorAll('.api').forEach(item => {
   item.addEventListener('click', e => {
    e.preventDefault();
    let link = item.textContent;
    location.hash = link;
   }, false)
  });
  // 监听路由
  window.addEventListener('hashchange', e => {
   console.log({
    location: location.href,
    hash: location.hash
   })
  }, false)

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue.js实现操作class的方法

D3.js实现动态仪表盘案列

以上がvue のシングルページ アプリケーションでのフロントエンド ルーティングの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。