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中文网其它相关文章！

推荐阅读：

JS访问DOM对象选中节点方法

vue中mint-ui使用步骤详解

热模块替换有哪几种实现方法

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