vueのデフォルトのルーティングモードは何ですか-フロントエンドQ&A-php.cn

vueのデフォルトのルーティングモードは何ですか

青灯夜游

リリース： 2021-12-24 17:30:25

オリジナル

3687 人が閲覧しました

vue のデフォルトのルーティングモードは「ハッシュ」モードです。このモードは URL のハッシュ値をルートとして使用し、完全な URL をシミュレートし、すべてのブラウザをサポートします。ハッシュモードの背後にある原理は onhashchange イベントであり、これはウィンドウオブジェクトで監視できます。

vueのデフォルトのルーティングモードは何ですか

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue のルーティングはデフォルトでハッシュモードになりますが、これは純粋なフロントエンドで実行できます。

ハッシュ: URL のハッシュ値をルートとして使用します。すべてのブラウザをサポートします。

ハッシュモードの背後にある原理は、window オブジェクトで監視できる onhashchange イベントです。

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

ログイン後にコピー

上記のコードは、ハッシュを変更することでページのフォントの色を変更できます。あまり役に立ちませんが、原理をある程度説明しています。

さらに重要な点は、ハッシュ変更を行った URL がブラウザによって記録されるため、ブラウザの「進む」と「戻る」を使用できることがわかり、「戻る」をクリックするとページのフォントの色も変更されるということです。変化、多様性。このように、ブラウザがサーバーに要求をしないにも関わらず、ページの状態と URL が 1 つずつ関連付けられるようになり、後にフロントエンドルーティングという横暴な名前が付けられ、シングルページアプリケーションの標準構成となりました。。

これをテストするための簡単なメソッドを書いてみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>测试一下</div>
    <script type="text/javascript">
        window.onhashchange = function(event){
            console.log(event.oldURL,event.newURL)
            let hash = location.hash.slice(1);
            document.body.style.color = hash;
        }
    </script>
</body>
</html>

ログイン後にコピー

vueのデフォルトのルーティングモードは何ですか

ブラウザ内で前後に進むことでページを変更できます。

NetEase Cloud Music と Baidu Netdisk は次のようなハッシュルーティングを使用します:

http://music.163.com/#/friend
https://pan.baidu.com/disk/home#list/vmode=list

ログイン後にコピー

そして他の 2 つの vue ルーティングモード:

History : HTML5 以降の History API とサーバー構成。公式 Web サイトの HTML5 履歴モードを参照してください。
要約: すべての JavaScript 実行モードをサポートします。ブラウザ API がないことが判明した場合、ルーティングは自動的にこのモードに強制されます。

#履歴ルーティング
## 履歴 API の登場により、フロントエンドルーティングが進化し始めました。 hashchange を使用すると、# 以降の URL フラグメントのみを変更できますが、履歴 API ではフロントエンドに完全な自由が与えられます

履歴 API は、切り替えと変更の 2 つの部分に分けることができます

(1) 履歴ステータスの切り替え

には、ブラウザの「進む」、「戻る」、「ジャンプ」操作に対応する「戻る」、「進む」、「進む」の 3 つのメソッドが含まれています。(Google の) ブラウザには「進む」と「戻る」しかないという生徒もいました。ジャンプはありません。ええと、マウスを前後に長押しすると、現在のすべてのウィンドウの履歴レコードが表示され、ジャンプできるようになります (ジャンプと呼ぶ方が適切かもしれません):

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

ログイン後にコピー

(2) 履歴ステータス

を変更します。pushState と replaceState の 2 つのメソッドがあります。これら 2 つのメソッドは、stateObj、title、url

history.pushState({color:&#39;red&#39;}, &#39;red&#39;, &#39;red&#39;)

window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === &#39;red&#39;){
        document.body.style.color = &#39;red&#39;;
    }
}

history.back();

history.forward();

ログイン後にコピー

の 3 つのパラメータを受け取ります。ページの状態が保存されます。 Pushstate を介して状態オブジェクトに格納されます。ページの URL がこの URL に戻るとき、この状態オブジェクトは、event.state を通じて取得できるため、ページの状態を復元できます。ここでのページの状態は、ページのフォントの色です。実際、スクロールバーの位置、読み取りの進行状況、コンポーネントのスイッチはすべてステート内に保存できます。

履歴 API を通じて、醜い # を失いましたが、問題もあります。

前進または後退することは怖くありませんが、更新するのは怖いです、f5, (バックエンドが準備されていない場合)、更新は実際にサーバーを要求するためです。

ハッシュモードでは、フロントエンドルーティングによって # の情報が変更されますが、ブラウザはリクエスト時にその情報を処理しないため、問題はありません。ただし、履歴の下ではパスを自由に変更できますが、更新時にサーバーに対応する応答またはリソースがない場合は、1 分ごとに 404 が表示されます。

[関連する推奨事項:「

vue.js チュートリアル

」]

以上がvueのデフォルトのルーティングモードは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。