Vueのルーティング実現原理:hashモードとhistoryモード

18195 ワード

javascript Vue sh history ルーティング実装

Vueのルーティング実装:hashモードとhistoryモード

hashモード(Vue-routerデフォルト)

例:

hashモードの長所と短所

historyモード

例:

historyモードの長所と短所:

従来のルーティングはフロントエンドルーティングとは異なる

フロントエンドルーティングにはhashモードとhistoryモードの2つのモードがあり,次にこの2つのモードの実現方式と利点と欠点を解析する.
Vue公式ドキュメント-HTML 5 Historyモード
プレゼンテーションを容易にするには、 light-serverが必要です.

yarn global add light-server
//   
npm -g install light-server

hashとhistoryの違い

hash
history
url表示
あります、とてもLow
いいえ、きれいです.
リターンリフレッシュ
hash値対応ページにロードできます
普通は404が落ちた
サポートバージョン
低バージョンブラウザとIEブラウザをサポート
HTML 5の新しいAPI
hashモード(Vue-routerデフォルト)hash は、フロントエンドルーティングの経路を #で実際のURLの後ろにつなぐモードである. #の後の経路が変化すると、ブラウザはであり、 hashchange である.
例:hash.htmlファイルを新規作成しました.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hashtitle>
head>
<body>
  <a href="#/a">A  a>
  <a href="#/b">B  a>
  <div id="app">div>

  <script>
    function render() {
      
      const app = document.querySelector('#app')
      app.innerHTML = window.location.hash
    }
    window.addEventListener('hashchange', render)
  script>
body>
html>

ディレクトリの下で実行:

light-server -s .  --port 3000

次に、http://localhost:3000/hash.htmlを開いて効果を確認します.
上記の例では、a を用いて2つのルーティングナビゲーションを設定し、appをとし、がをトリガすると、これは実際には多くのフロントエンドフレームの実現原理である.
hashモードの長所と短所
メリット

はフロントエンド構成のルーティングテーブルのみを必要とし、バックエンドの参加

を必要としない.

互換性が良く、ブラウザは

をサポートできます.

hash値の変更はバックエンドに要求を送信ことなく、フロントエンドルーティング

に完全に属する.
欠点

hash値の前に#を追加する必要があり、url規範に合致せず、

も美しくない.
historyモード
history APIはH 5が提供する新しい特性であり、開発者がフロントエンドルーティング、すなわち URL 、 (urlを置き換え、ページをリフレッシュしない)を直接変更することを可能にする.
例:history.htmlを新設しました.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>historytitle>
head>
<body>
  <a href="javascript:toA();">A  a>
  <a href="javascript:toB();">B  a>
  <div id="app">div>
  <script>
    function render() {
      
      console.log('render')
      app.innerHTML = window.location.pathname
    }
    function toA() {
      
      history.pushState({
      }, null, '/a')
      render()
    }
    function toB() {
      
      history.pushState({
      }, null, '/b')
      render()
    }
    window.addEventListener('popstate', render)
  script>
body>
html>

ディレクトリの下で実行:

light-server -s . --historyindex '/history.html' --port 3000

次に、http://localhost:3000/history.htmlを開いて効果を確認します.
history APIは開発者が呼び出すための豊富な関数を提供しています. を開いて、ブラウザのアドレスバーの変化を観察するには、次の文を入力します.

history.replaceState({
     }, null, '/b') //     
history.pushState({
     }, null, '/a') //                        
history.back() //   
history.forward() //   
history.go(-2) //   2

上記のコード popstate 、このイベント :

ユーザはブラウザのをクリックして

を操作する.

historyのback、forward、およびgoを手動で呼び出す方法

historyのpushStateおよびreplaceStateの方法

これも、上記のtoAとtoB関数の内部でrenderメソッドを手動で呼び出す必要がある理由です.また、light-serverのコマンドが--historyindex '/history.html'パラメータ増えていることにも気づいたかもしれませんが、これは何をしているのでしょうか.
ブラウザがリフレッシュすると、は実際のリソースリクエストを送信し、このパスがhistory APIで設定されたURLであれば、サービス側にはこのリソースが存在しないことが多く、404に戻ります.上のパラメータの意味は history.html です.△やってみたが反応しなかった.
したがって、がhistory APIのに基づいている場合は、必ずがサポートされなければなりません.そうしないと、404が大量に発生します.最も一般的なNginxを例にとると、構成されたlocation/に次の行を追加するだけです.

try_files $uri /index.html

historyモードのメリットとデメリット:
メリット:

urlアドレス仕様に合致し、#を必要とせず、比較的美しく使用される

欠点:

互換性はhashに及ばず、サービス側がリダイレクトをサポートする必要がある.そうしないと、ページをリフレッシュすると404になる

互換性が比較的劣る、HTML 5 Historyオブジェクトに新たに追加されたpushState()とreplaceState()メソッドを利用して、特定ブラウザのサポートが必要となる.

従来のルーティングはフロントエンドルーティングとは異なります
従来のルーティングとは、ユーザがurlにアクセスすると、対応するサーバがこの要求を受信し、url内のパスを解析して対応する処理ロジックを実行することを意味する.これでルーティングの配布が完了しました.
一方、フロントエンドルーティングはサーバには関係なく、フロントエンドがhashまたはHTML 5のhistory APIを利用して実現され、一般的に異なるコンテンツの表示と切り替えに用いられる. 、、、

JS毎日一題:vue中keepaliveはどのように理解しますか?

AWS CLI で Amazon ECS のタスクを実行する (第４回)