ホームページ  >  記事  >  ウェブフロントエンド  >  vue ルーティングのさまざまなモードには何がありますか?

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

青灯夜游
青灯夜游オリジナル
2023-01-13 14:44:595719ブラウズ

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

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

#このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。