Vue2.X でのルーティング関数とフック関数の使用

ここで、Vue2.X に基づいたルーティングとフック関数の詳細な説明を共有します。これは良い参考値であり、皆さんの役に立つことを願っています。

最近仕事が忙しくて長い間記事を更新していませんでしたが、新しいことは何も学べませんでした。

今日はこのルーティングフックについて話しましょう。

ナビゲーションとフック関数:

ナビゲーション: ルートが変更されていますキーワード: ルート変更

フック関数: ルート切り替えのさまざまな段階で異なるノード関数を呼び出します (私の考えでは、フック関数は次のようになります: トリガーされる関数)特定のノードとタイミングによって）。

フック関数は主にナビゲーションをインターセプトし、ジャンプまたはキャンセルを完了させ、ナビゲーションのさまざまな段階でさまざまな関数を実行するために使用されます。最後に、フック関数の実行結果がナビゲーションに何をすべきかを指示します。 。

ナビゲーションは、すべてのフックが解決されるまで待機し、フック関数が次に何をすべきかを指示するのを待ちます。 next()で指定します。

ログインの例を示します

router.beforeEach(({meta, path}, from, next) => {　　 
 
　　const {auth = true} = meta  // meta代表的是to中的meta对象，path代表的是to中的path对象 
 
　　var isLogin = Boolean(store.state.user.id) // true用户已登录， false用户未登录　 
　　 
　　if (auth && !isLogin && path !== '/login') { // auth 代表需要通过用户身份验证，默认为true，代表需要被验证， false为不用检验 
　　　　return next({ path: '/login' }) // 跳转到login页面 
　　} 
 
 
　　next() // 进行下一个钩子函数 
})

まず beforeEach フック関数について説明します。これはグローバルな before フック関数であり、(before each) すべてのルートが変更されるたびにすべて実行する必要があります。

その 3 つのパラメータ:

to: (Route ルーティング オブジェクト) 入力しようとしているターゲット ルーティング オブジェクトの to オブジェクトの下の属性: path params query hash fullPath matched name meta (matched の下、ただし、この例は直接使用できます)

from: (ルートルーティングオブジェクト) 現在のナビゲーションが出発しようとしているルート

next: (関数関数) このフックを解決するには、このメソッドを呼び出す必要があります。 呼び出し方法: next (パラメーターまたは空) ***

next を呼び出す必要があります (パラメーターがない場合): パイプライン内の次のフックを実行します。最後のフック関数に到達すると、ナビゲーション ステータスが確認されます (確認済み)

。

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

グローバルフック関数のグローバルafter各フック:

afterフックにはnextメソッドがなく、ナビゲーションを変更できません。これは、ナビゲーションの実行方法が決定された後に、アタッチされた実行があることを意味します。コンポーネント内のフック関数

フック関数: (beforeRouteEnter および beforeRouteLeave と監視関数)

Vue2.X では、コンポーネント内のフック関数が vue1.X よりもはるかに少なくなっています。 。

コンポーネント独自のライフサイクルフック関数を使用して、activate と deactivate を置き換えます

$router のウォッチャーを使用して、ルート変更に応答します

canActivate はルーター設定の beforeEnter で実装できます

canDeactivate は beforeRouteLeave に置き換えられましたコンポーネントのルートレベルの定義で指定されます。このフック関数は、コンポーネント インスタンスをコンテキストとして使用して呼び出されます。

canReuse は、わかりにくく、めったに使用されないため、削除されました。

データ (to、from、next) フックを取得するには、代わりにコンポーネントで beforeRouteEnter (to、from、next) を使用します。

上記は私が皆さんに役立つようにまとめたものです。将来。

関連記事:

vue-cli プロジェクトにおける ProxyTable のクロスドメインの問題

React コンポーネントでの refs の使用方法

webpack での devtool の使用の詳細な説明

以上がVue2.X でのルーティング関数とフック関数の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。