Vue の 2 つのルーティング モード (ハッシュとヒストリー) について話しましょう

ルーターには 2 つのモードがあります。vue -cli# を使用する場合、1 つは hash モード、もう 1 つは history モードです。 ## および vue-routervue プロジェクトはデフォルトでビルドされます。特別な設定が行われていない場合、デフォルトは hash mode

です。これら 2 つのモードにはそれぞれ利点がありますが、その使用方法の違いは多かれ少なかれ面接で質問されます

今日一緒に学びましょう

ハッシュ モード (hash )

vue-routerデフォルトの hash モードでは、url (hash) のハッシュを使用して、完全な URL をシミュレートします。 、URL が変更されると、ページはリロードされません。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

以下に示すように

http://localhost/#home

機能 : # 以降のパラメータはサーバーに送信されません。互換性が高く、パスの一部としてサーバーに送信されません。つまり、HTTP には含まれません。 リクエストの本文。まったく影響はありません。フロントエンドの生徒が自分でプレイするときだけです。

ページが更新されると、現在のページに留まり、リロードされません

hash パスが醜い、単純ではないと思われる場合は、history.pushState API# を最大限に活用するルーティングの history モードを使用できます。 ## または replaceState で完了、url ページをリロードせずにジャンプ履歴モード

history

モード: # を追加##mode 値を history として、インスタンス化された構成オブジェクトにモードを設定します。 変換後、hash モードは history mode

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

になります。ブラウザ# の外観を気にする場合は、これら 2 つの方法を使用しても問題ありません。 ##url、

# 記号が url に混在していると、少し上品に見えませんもしよければ、url見た目がよくなります。

history

モードを使用してくださいただし: hash モードでは、

hash

シンボルを使用する前のコンテンツがリクエスト本文に含まれます。 # の後の番号はサーバー に送信されません。ただし、history モードでは、フロントエンド

URL

はクライアントによって開始された URL は、https://itclan.cn/fontend/id のように一貫性のある である必要があります。バックエンドに正しい

/fontend /id

ルート処理がない場合、404 エラー が返されます。 history モードをサポートしたい場合は、 404 問題を完全に解決するには、バックエンドとフロントエンドのルートを一致させる必要があるため、

バックエンドのクラスメートと交渉する必要があります。

##すべての状況をカバーするためにサーバーに候補リソースを追加します。url一致する静的リソースがない場合は、ホームページが返される必要があります。404 が表示される場合は、ユーザーはこれをバグだと思いがちです。

ページをフォアグラウンドで更新する 404 問題を解決する方法この問題を解決するには:

Node# を使用している場合## バックエンド サービスの場合は、

Node

バックグラウンドに次のようなミドルウェアを追加できます。

connect-history -api-fallback

でこの 404 問題を解決できます

java または php の場合は、バックエンド クラスメートを見つけてバックエンド ルーティングとフロントエンド ルーティングにマッチングさせるか、Ngnix

を使用します。中間プロキシとして

次の単純な Node サービス コードには server.js という名前を付けることができます。また、express

と

connect- もインストールします。 History-api-fallbackmiddlewareバックエンドサービス実行コマンドの開始nodeserver.js

const express = require('express');
const history = require('connect-history-api-fallback')

const app = express()
app.use(history())
app.use(express.static(__dirname+'/static'));


app.listen(5005,(err)=> {
  if（！err）consle.log('服务器启动成功了')
})

コードをdist#に配置します。 ## ファイルは、フロントエンド パッケージ化によって

static

に生成されます。この操作により、ページの更新の問題、404 質問

アプリケーションの理解が解決できます。シングルページ スパの フロントエンドで使用される vue-router の 2 つのモードはシングルページ アプリケーションであり、アプリケーション全体 router# には 1 つだけあります。 ## Router は、$router

属性を通じて取得できます。

つまり、アプリケーション全体には完全なページが 1 つだけあります。同時に、ページ内のナビゲーション リンクをクリックします。ページは更新されず、ページの部分的な更新のみになります。

#そして、ページ内のデータは、ajax リクエスト ## を通じて取得する必要があることがよくあります。 #現在開発中の新しいプロジェクト、フロントエンドとバックエンドの両方が分離されており、基本的には単一ページのアプリケーションです。概要

フロントエンドのルーティングには 2 つのモードがあります。

hash

モード、もう 1 つは

history モードです。hash

モードがデフォルトのモードです。

# はサーバーに送信されません

history

Mode,

url見た目は良くなりますが、完全なサポートが必要な場合は、バックエンドのクラスメートからのサポートが必要です。エンド ルーティングとフロントエンド ルーティングは 一致する必要があります。そうでない場合、オンラインでデプロイされます。ページが更新されるとすぐに、問題 404 が表示されます。<p> (学習ビデオ共有: <a href="https://www.php.cn/course/list/18.html" target="_blank">vuejs 入門チュートリアル </a>、<a href="https://www.php.cn/course/list/91.html" target="_blank" textvalue="编程基础视频">基本プログラミング ビデオ </a>)</p>

以上がVue の 2 つのルーティング モード (ハッシュとヒストリー) について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。