vue-router のナビゲーションフック

Vue.js では、Vue-router が一般的なルーティングツールになりました。シングルページアプリケーション (SPA) でのページジャンプとコンポーネントの読み込みは、Vue-router を通じて簡単に実現できます。ただし、アプリケーションでは、ルートジャンプの前後に、権限の確認やデータのプリロードなど、いくつかの操作を実行する必要がある場合があります。このとき、Vue-router が提供するナビゲーションフック (Navigation Guards) を使用できます。

フロントガード

フロントガードはルートがジャンプする前に呼び出される関数です。Vue-router は、次の 3 つの事前保護を提供します。

前それぞれ

グローバルプレガードは各ルートジャンプの前に呼び出され、ログインステータスの検証やその他の操作に使用できます。ガードは、to、from、next の 3 つのパラメーターを受け取ります。このうち、toはリダイレクト先のルートオブジェクト、fromは現在のルートオブジェクト、nextはルートがジャンプし続けられるかどうかを示す関数です。

javascriptコードをコピー

router.beforeEach((to, from, next) => { if (to.meta.auth && !store.state.isLogin) { // 需要登录才能访问该路由 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } })

解決前

グローバル解析ガードは、すべてのルーティングコンポーネント内のガードと非同期ルーティングコンポーネントが解析された後に呼び出され、ルーティングデータのプリロードやその他の操作に使用できます。ガードは、to、from、next の 3 つのパラメーターを受け取ります。

javascriptコードをコピー

router.beforeResolve((to, from, next) => { // 预加载组件数据 axios.get(to.meta.url).then(res => { to.meta.data = res.data next() }) })

各後

グローバルポストフックは各ルートジャンプ後に呼び出され、ページのスクロールやユーザー行動の統計に使用できます。ガードにはパラメーターが 1 つだけあります: to。

javascriptコードをコピー

router.afterEach((to) => { // 页面滚动到顶部 window.scrollTo(0, 0) // 统计用户跳转行为 statistics(to.path) })

ルーティング専用ガード

ルート専用ガードは、特定のルート設定でのみ定義される事前ガードです。このようにして、特定のルートだけを特別に扱うことができます。ルーティング排他的ガードは、ルーティング設定に beforeEnter 属性を追加することで実装されます。

javascriptコードをコピー

const routes = [ { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { if (!store.state.isAdmin) { // 需要管理员权限才能访问 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } } } ]

コンポーネント内のガード

コンポーネント内のガードは、コンポーネントインスタンスに beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 属性を追加することで実装できます。これらのプロパティは、ルーティングコンポーネントがアクティブ化される前、ルーティングが更新されるとき、およびルーティングが終了するときの操作に対応します。

javascriptコードをコピー

export default { beforeRouteEnter (to, from, next) { // 组件被激活前的操作，例如数据加载等 getDetail(to.params.id).then(detail => { next(vm => vm.detail = detail) }) }, beforeRouteUpdate (to, from, next) { // 路由更新时的操作，例如数据更新等 updateDetail(to.params.id).then(detail => { this.detail = detail next() }) }, beforeRouteLeave (to, from, next) { // 路由离开时的操作，例如确认框等 if (this.isDirty) { if (confirm('你还有未保存的数据，确定要离开吗？')) { next() } else { next(false) } } else { next() } } }

完全な例

以下は、プレガード、ルート専用ガード、およびコンポーネントガードの使用の完全な例です。

javascriptコードをコピー

const routes = [ { path: '/', component: Home, meta: { auth: true } }, { path: '/login', component: Login }, { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { if (!store.state.isAdmin) { // 需要管理员权限才能访问 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } } }, { path: '/detail/:id', component: Detail, beforeRouteEnter (to, from, next) { // 组件被激活前的操作，例如数据加载等 getDetail(to.params.id).then(detail => { next(vm => vm.detail = detail) }) }, beforeRouteUpdate (to, from, next) { // 路由更新时的操作，例如数据更新等 updateDetail(to.params.id).then(detail => { this.detail = detail next() }) }, beforeRouteLeave (to, from, next) { // 路由离开时的操作，例如确认框等 if (this.isDirty) { if (confirm('你还有未保存的数据，确定要离开吗？')) { next() } else { next(false) } } else { next() } } } ] const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { if (to.meta.auth && !store.state.isLogin) { // 需要登录才能访问该路由 next({ path: '/login', query: { redirect: to.fullPath } // 将目标路由地址作为参数传递给登录页面 }) } else { next() // 跳转到目标路由 } }) export default router

プレガード、ルート排他ガード、コンポーネントガードを使用することで、より柔軟なルーティング制御とデータのプリロード操作を実現できます。実際のアプリケーションでは、対応する操作を完了するには、特定の状況に応じて適切なナビゲーションフックを選択する必要があります。

要約する

Vue-router のナビゲーションフックを使用すると、ルーティングジャンプの前後に、権限の確認やデータのプリロードなどの一部の操作を実行できます。Vue-router は、グローバルプレガード、グローバル解析ガード、グローバルポストフックに加え、ルート専用ガードとコンポーネントガードを提供しており、特定の状況に応じて適切なナビゲーションフックを選択して、対応する操作を完了できます。

ナビゲーションフックを使用する場合は、無限ループを避けてください。そうしないと、ブラウザがクラッシュする原因になります。一方で、ナビゲーションフックはサーバーサイドレンダリングやスケルトン画面などの最適化手法を完全に置き換えることはできず、実際のプロジェクトでは最適なソリューションを総合的に検討して選択する必要があります。