vue ルーティングのさまざまなモードには何がありますか?

Vue ルーティングには、ハッシュ、ヒストリー、抽象の 3 つのモードがあります。相違点: 1. ハッシュ モードでは # 文字が URL パスに表示されますが、他のモードでは表示されません; 2. ハッシュ値の変更により hashchange イベントがトリガーされますが、他のモードではトリガーされません; 3. 履歴モードではアドレス全体が表示されますはリロードされ、履歴レコードが保存できるので便利です。前進および後進では、他のモードではできません。

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

vue ルーティングには実際には 3 つのモードがあります:

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

• 履歴: HTML5 以降の履歴 API とサーバー構成

• 要約: すべての JavaScript 実行モードをサポートします。ブラウザ API がないことが判明した場合、ルーティングは自動的にこのモードに強制されます。

vue-router はデフォルトでハッシュ モードを使用します。つまり、次の URL が表示されます。URL には

# が含まれています。次のコードを使用して履歴モードに変更します:

import Vue from 'vue'
import Router from 'vue-router'
const userInfo = () => import('@/views/userInfo')
Vue.use(Router)

export default new Router({
  mode: 'history',//hash abstract
  routes: [
    {
      path: '/user-info/:userId',
      component: userInfo
    }
  ]
})

Difference

ハッシュ モード:

• URL パスには # 文字が含まれます

• ハッシュ値は HTTP リクエストには含まれません。フロントエンド ルーティングによって処理されるため、ハッシュ値が変更されてもページは更新されず、サーバーにリクエストは送信されません

• ハッシュ値の変更によりハッシュ変更イベントがトリガーされます

#履歴モード:

アドレス全体が再ロードされ、履歴記録が保存され、前後方向に便利です
HTML5 API (古いブラウザではサポートされていません) と HTTP サービスを使用します。設定を終了します。バックグラウンド設定がない場合は、ページが開いたときに 404

• ##nginx 設定が表示されます。更新:

location / {
  try_files $uri $uri/ /index.html;
}

ルート パラメーターの取得

https://xxx.com//user-info/888 

this.$route.params.userId

https://xxx.com//user-info?userId=888

this.$route.query.userId

(学習ビデオ共有: Web フロントエンド開発

、

基本プログラミング ビデオ)

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