Vue-Router パターンとフックの使用方法 (詳細なチュートリアル)

この記事では主に Vue-Router モードとフックの使用方法を紹介しますので、参考にしてください。

前回の記事は衣食住の問題を解決すると言っても過言ではないvue-routerの基本的な使い方を中心に書きました

モード

vue-routerのモードオプションは以下の通りです。主にルーターがインスタンス化されるときに使用されます。

const router = new VueRouter({
　　　mode: 'history', // 两种类型history 还有 hash
   routes: routes // 可以缩写成routes
})

ヒストリーとハッシュの 2 つのモードから選択できます。大まかに比較すると、

。ハッシュ履歴をサポートしますハッシュモードはバックグラウンドのURLです。アドレスのハッシュ値はバックグラウンドに送信されないため、サーバー側はルートアドレスのマッピングのみを行う必要があります。

モード	欠点
使いやすく、バックグラウンドは必要ありません	はURL内にハッシュの形式で存在し、バックグラウンドに送信されません
アドレスは明確で、理解しやすく、バックグラウンド処理	バックグラウンドの協力が必要です

履歴モードの最終的なルーティングは URL のパス名に反映されます。この部分はサーバーに送信されるため、サーバーは可能なパス値をそれに応じてマッピングする必要があります。または、マッピングにファジーマッチングを使用します。

さらに、履歴モードでバックエンドが 1 対 1 マッピングではなくファジーマッチングを実行する場合は、404 の状況に注意する必要があります。このとき、フロントエンドルーターに404ページを定義する必要があります。

404ルートの定義

ルーター自体のマッチングは上から下なので、前に一致するルートがあればジャンプします。したがって、次のように、最後に 404 ルートを直接追加できます

let routerConfig = [{
  path: '/pages',
  component: App,
  children: [{
    path: 'demo/step1/list',
    component: coupon,
    name: 'coupon-list',
    meta: {
      title: '红包'
    }
  }]
}, {
  path: '*',
  component: NotFound,
  name: 'notfound',
  meta: {
    title: '404-页面丢了'
  }
}]

前の一致が見つからない場合、* はすべてを表し、すべてが 404 ページを指すことを意味します

ルーティング フック

ルーティング フック主にルート変更時に利用者が何らかの特別な処理を行うことで定義され、頼りになります。 。なんて一口でしょう。

一般的に、Vue は 3 つの主要なタイプのフックを提供します

1. グローバル フック

2. 特定のルート専用のフック

グローバル フック

フックはグローバルです 使用方法は次のとおりです

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'demo'
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {
})

特定のルート用の排他的なフック

前述したように、これは特定のルートに対して単独で使用され、後続のコンポーネントのフックと本質的に同じです。これらはすべて特定のルートを指します。違いは、ここでの一般的な定義はコンポーネントではなくルーターにあるということです。次のように

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

コンポーネント内フック

まずは公式の定義を見てください:

ルーティングコンポーネントで次のルートナビゲーションフックを直接定義できます

beforeRouteEnter

1. beforeRouteUpdate (2.2の新機能)

2. beforeRouteLeave

3. ルーティング コンポーネント! ルーティング コンポーネント! ここで説明する「ルーティング コンポーネント」と「ルーティング コンポーネント」に注意してください。 == コンポーネント、ルーティングコンポーネント! == コンポーネント、ルーティングコンポーネント! == コンポーネント!以前はこれに注意したことがなかったのですが、愚かにもサブコンポーネントのフック関数を調整したところ、それが役に立たないことがわかりました。 。 。

まずルーティング コンポーネントとは何なのか見てみましょう。

ルーティングコンポーネント：ルータ内のコンポーネントに直接定義されたコンポーネント

つまり、ルータ内に定義されたentry vueファイル以外のコンポーネントにはフック機能がないため、使用する必要がありません。ただし、これを使用してもエラーは報告されず、応答しなくなるだけです。 (絵を描きたかったけどめんどくさい… 自分で理解するだけでわかりやすいです)

ルート内でのフックの使い方を振り返ってみましょう とてもシンプルで簡単です。データとメソッドと同じレベルです

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

3 つのルーティング フックには、すべて 3 つのパラメータが含まれています

: Route: これから入力するターゲット ルーティング オブジェクトです。 Route: 現在のナビゲーションは Router を出ようとしています

1. next: 機能: このフックを解決するには、必ずこのメソッドを呼び出してください。実行効果は、次のメソッドの呼び出しパラメータによって異なります。

2. next(): パイプラインの次のフックに進みます。すべてのフックが実行されると、ナビゲーションのステータスが確認されます。

3. next(false): 現在のナビゲーションを中断します。ブラウザの URL が変更されると (おそらくユーザーが手動で、またはブラウザの [戻る] ボタンによって)、URL アドレスは from ルートに対応するアドレスにリセットされます。

4. next(‘/’) または next({ path: ‘/’ }): 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが開始されます。

5. 上記は私があなたのためにまとめたものです。
6. 関連記事:

node要素をjQueryに置き換える方法

Ajaxを介したServlet3.0と純粋なJavaScriptのやり取りの詳細な例

vueで実装したツリー型ディッシュのサンプルコード

以上がVue-Router パターンとフックの使用方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。