Vue で動的ルーティングとルーティング ガードを実装する方法

Vue で動的ルーティングとルーティング ガードを実装する方法

Vue では、ルーティングはページ ジャンプや権限制御などに関連する非常に重要な概念です。 。この記事では、動的ルーティングとルーティング ガードの実装方法を紹介し、具体的なコード例を示します。

1. 動的ルーティング

動的ルーティングとは、さまざまな条件やパラメーターに基づいてさまざまなルーティング構成を生成することを指します。 Vue の動的ルーティングは、Vue Router を使用して実装されます。

1. Vue Router のインストール

まず、Vue Router をインストールする必要があります。プロジェクトのルート ディレクトリで次のコマンドを実行します。

npm install vue-router

2. ルーティング ファイルの構成

プロジェクトの src ディレクトリにルーター ディレクトリを作成し、インデックスを作成します。 .js ファイル。ルーティングの構成に使用されます。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: []
})

4. 動的に生成されたルーティング

バックエンド インターフェイスまたはその他の方法を通じて動的ルーティング構成を取得し、それをルーティング構成に追加できます。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

// 获取动态路由配置
// 假设通过接口获取到的路由数据为response.data
const dynamicRoutes = response.data

// 添加动态路由
router.addRoutes(dynamicRoutes)

export default router

上記のコードを通じて、バックグラウンド インターフェイスから返されたデータに基づいてルートを動的に生成し、それらを Vue Router の設定に追加できます。

2. ルート ガード

ルート ガードを使用すると、特定のルートにアクセスするユーザーの権限を制御できます。たとえば、ユーザーは特定のページにアクセスする前にログインする必要があります。 Vue Router はルートガードの機能を提供します。

まず、ルート ガードに関連するいくつかの概念を理解する必要があります。

• グローバル プレガード: ルーティングの切り替え前に実行され、グローバルな権限制御などに使用できます。オペレーション。 。
• ルート排他ガード: 特定のルートに対してのみ有効で、ローカルの許可制御などに使用できます。
• コンポーネント内のガード: 特定のコンポーネントに対してのみ有効であり、コンポーネント内で権限制御などの操作を実行するために使用できます。

1. グローバル フロント ガード

グローバル ガードはルーティング設定ファイル (router/index.js) で使用できます。たとえば、ログイン許可制御を実装するには、次のようにします。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  const isLogin = localStorage.getItem('isLogin')

  // 如果用户未登录，并且访问的页面需要登录权限，则跳转至登录页
  if (!isLogin && to.meta.requireAuth) {
    next('/login')
  } else {
    next()
  }
})

export default router

上記のコードでは、router.beforeEach() メソッドを通じてグローバル フロント ガードを追加します。このガードでは、ユーザーがログインしているかどうかを判断し、さまざまな状況に応じて対応するジャンプを行います。

2. ルート専用ガード

グローバル フロント ガードに加えて、ルートに対して個別のガードを設定することもできます。たとえば、管理者の権限制御を実装するには、次のようにします。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requireAdmin: true } // 设置路由元信息
    }
  ]
})

export default router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requireAdmin: true } // 设置路由元信息
    }
  ]
})

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否为管理员
  const isAdmin = localStorage.getItem('isAdmin')

  // 如果用户不是管理员，并且访问的页面需要管理员权限，则跳转至首页
  if (!isAdmin && to.meta.requireAdmin) {
    next('/')
  } else {
    next()
  }
})

export default router

上記のコードでは、/admin ルートのメタ情報 meta.requireAdmin を構成して、ページは管理メンバー権限が必要です。次に、グローバル フロント ガードを使用してユーザーが管理者であるかどうかを判断し、対応するジャンプを実行します。

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

グローバル フロント ガードとルーティング専用ガードに加えて、Vue Router はコンポーネント内のガードも提供します。たとえば、ページのスクロール動作を制御するには、次のようにします。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

export default router

// App.vue
<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  // 组件内的守卫：每次路由切换后滚动到顶部
  beforeRouteUpdate(to, from, next) {
    window.scrollTo(0, 0)
    next()
  }
}
</script>

上記のコードでは、App.vue コンポーネントの beforeRouteUpdate() メソッドを使用して、ルートが切り替わるたびにページを一番上までスクロールします。

概要: この記事では、Vue で動的ルーティングとルーティング ガードを実装する方法を紹介し、具体的なコード例を示します。動的ルーティングは、動的ルーティングの設定を取得することで、異なるルートを生成できます。ルート ガードを使用すると、グローバル フロント ガード、ルート専用ガード、コンポーネント内のガードなど、特定のルートへのユーザーのアクセスを制御できます。これらの関数の実装は、複雑なフロントエンド アプリケーションを構築するために非常に重要です。

以上がVue で動的ルーティングとルーティング ガードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。