22

誰かが次の質問に答えてくれたら嬉しいです

  1. それはどのように機能しますか？
  2. なぜそれが必要なのですか？
  3. それは何を改善しますか？
4

3 に答える 3

24

クライアント側のルーティングはサーバー側のルーティングと同じですが、ブラウザで実行されます。

一般的なWebアプリケーションでは、さまざまなURLにマップされる複数のページがあり、各ページにはいくつかのロジックとテンプレートがあり、それらがレンダリングされます。

クライアント側のルーティングは、ロジックにJavaScriptを使用し、JSベースのテンプレートエンジンまたは他のそのようなアプローチを使用してページをレンダリングし、ブラウザでこのプロセスを実行するだけです。

通常、これはシングルページアプリケーションで使用され、サーバー側のコードは主に、クライアント側のコードがAjaxを介して使用するRESTfulAPIを提供するために使用されます。

于 2012-05-06T18:58:52.390 に答える
7

シングルページアプリケーションを構築しようとしていて、クライアント側のルーティングについて知るようになりました。

クライアント側のルーティングを実装することで、次のことを実現できました。

  1. ブラウザのフロントボタンとバックボタンが、1ページのJavaScriptアプリケーションで機能し始めました。これは、モバイルブラウザからページにアクセスする際に非常に重要でした。
  2. ユーザーは、以前は不可能だったURLをブックマーク/共有することができました。
于 2014-05-06T09:42:34.817 に答える
1

遅いことは知っていますが、クライアント側ルーティング（CSR）がどのように機能するかについての情報があります。この回答は、クライアント側ルーティングの完全なjs実装を提供しようとするのではなく、独自の概念の実装に役立つ概念を明らかにしようとしています。ユーザーがアンカータグをクリックすると、ブラウザがサーバーにリクエストを送信するのは事実です。ただし、イベントをインターセプトして、デフォルトの動作、つまり「event.preventDefault（）;」を使用してサーバーにリクエストを送信することを防ぐことができます。以下は、ReactルーターのWebページからの抜粋です。

<a
  href="/contact"
  onClick={event => {
    // stop the browser from changing the URL and requesting the new document
    event.preventDefault();
    // push an entry into the browser history stack and change the URL
    window.history.pushState({}, undefined, "/contact");
  }}
/>

また、進む/戻るボタンのクリックを聞くことも重要です。これは、によって行うことができます、

window.addEventListener("popstate", () => {
  // URL changed!
});

しかし、上記の2つのスニペットを見ると、CSRを実装する方法を想像できます。それにはもっとたくさんのことがあります。そのため、React Routerのようなライブラリが存在し、angularのようなWebフレームワークがデフォルトでCSRを提供します。

詳細については、以下のリンクにアクセスしてください。reactルーターのコンセプトページが表示されます。

https://reactrouter.com/docs/en/v6/getting-started/concepts

また、トピックをさらに深く知りたい場合は、Angularルーターのコードを確認してください。2つの実装を比較すると、はるかに多くの洞察が得られます。

于 2021-11-09T08:12:01.200 に答える