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 では、履歴オブジェクトが提案されています。pushState() メソッドと replaceState() メソッドが追加されており、これら 2 つのメソッドは、あたかも履歴スタックにデータを追加するために使用できます。 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 を使用して「戻る」、「進む」、および「進む」メソッドを呼び出した場合にのみトリガーされます。また、このイベントは同じドキュメントのみを対象とします。閲覧履歴の切り替えにより異なるドキュメントが読み込まれる場合、このイベントはトリガーされません。

使用法: 使用する場合、popstate イベントのコールバック関数を指定できます。このコールバック関数のパラメータはイベント オブジェクトであり、その state 属性は、現在の URL の PushState メソッドと replaceState メソッドによって提供される state オブジェクト (つまり、これら 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' }です

II.ハッシュ

1. ハッシュの基本紹介

URL にはハッシュ 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怎样部署nginx案例（附代码）

从零开始操作AngularJS实现应用模块化

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