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

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

1. window.history

2. location.hash

一.history

1. 履歴の基本的な概要

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

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

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

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

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

2.history.pushState

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

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

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

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

3 .history.replaceState

4と同じ。popstateイベント

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

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

<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)

二.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 サイトの他の関連記事を参照してください。