Vue Router でマルチレベルのリダイレクトを実装する方法-Vue.js-php.cn

Vue Router でマルチレベルのリダイレクトを実装する方法

WBOY

リリース： 2023-09-15 10:57:52

オリジナル

1318 人が閲覧しました

如何在 Vue Router 中实现多级重定向

Vue Router でマルチレベルリダイレクトを実装するには、特定のコードサンプルが必要です

Vue Router は、フロントエンドの実装に使用される Vue.js の公式ルーティングマネージャーです。ルーティング機能。実際のプロジェクトでは、ユーザーがルートにアクセスすると、条件に基づいて自動的に別のルートにジャンプする、多レベルのリダイレクトが必要な状況に遭遇することがよくあります。この記事では、Vue Router でマルチレベルリダイレクトを実装する方法を紹介し、具体的なコード例を示します。

Vue Router でのマルチレベルリダイレクトの実装は、ルートのメタフィールドを構成することで実現できます。メタフィールドは追加情報を含むオブジェクトであり、そのフィールドをカスタマイズしてマルチレベルリダイレクトを実装できます。

まず、条件に基づいてリダイレクトするジャンプ関数を定義する必要があります。実装したい機能が、ユーザーがログインしていない場合はログインページに自動的にジャンプし、ユーザーがログインしていてページへのアクセス権限を持っていない場合は、自動的に不正なページにジャンプする機能であるとします。

// 跳转函数
function redirect(to) {
  if (!user.isAuthenticated) {
    // 没有登录，跳转到登录页
    return { path: '/login', query: { redirect: to.fullPath } }
  } else if (!user.hasPermission(to.meta.permission)) {
    // 没有权限，跳转到无权限页面
    return { path: '/unauthorized' }
  } else {
    // 有权限，继续访问原页面
    return { next: true }
  }
}

ログイン後にコピー

上記のコードでは、user.isAuthenticated はユーザーがログインしているかどうかを示し、user.hasPermission(permission) はユーザーが特定の権限を持っているかどうかを示します。

次に、ルーティング設定でこのジャンプ機能を使用する必要があります。ホームページ、ログインページ、および許可なしページの 3 つのルートがあるとします。

// 路由配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {}
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {}
  },
  {
    path: '/unauthorized',
    name: 'unauthorized',
    component: Unauthorized,
    meta: {}
  }
]

ログイン後にコピー

現在、ルーティング設定のメタフィールドは空です。特定の状況に応じて設定する必要があります。

まず、ホームページルートのメタフィールドを設定して、ユーザーがログインする必要があるかどうかを判断する必要があります。

// 路由配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: { requiresAuth: true }
  },
  // ...
]

ログイン後にコピー

上記のコードでは、ホームページのメタフィールドに requireAuth フィールドを追加しました。値は true で、ユーザーがホームページにアクセスするにはログインする必要があることを示します。

次に、アクセス許可を必要とするルートのメタフィールドを構成して、ユーザーにアクセス許可があるかどうかを判断する必要があります。

// 路由配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: { requiresAuth: true, permission: 'admin' }
  },
  // ...
]

ログイン後にコピー

上記のコードでは、アクセス許可を必要とするルートのメタフィールドにアクセス許可フィールドを追加します。値はアクセス許可名です (ここでは、必要なアクセス許可が admin であると仮定します)。

最後に、ルートの beforeEach フックでジャンプ関数を使用して、メタフィールドに基づいてリダイレクトする必要があります。

// 路由配置
const router = new VueRouter({
  routes
})

// 全局路由守卫
router.beforeEach((to, from, next) => {
  const redirectTo = redirect(to)
  if (redirectTo.path) {
    // 跳转到指定页面
    next(redirectTo)
  } else {
    // 继续访问原页面
    next()
  }
})

ログイン後にコピー

上記のコードでは、beforeEach フックでジャンプ関数を使用して、リダイレクトが必要かどうかを判断します。ジャンプ関数がパスフィールドを持つオブジェクトを返した場合は、指定したページにリダイレクトする必要があることを意味し、それ以外の場合はリダイレクトがなく、元のページに引き続きアクセスすることを意味します。

これまでに、Vue Router でマルチレベルリダイレクトを実装するプロセス全体が完了しました。特定の条件に従って設定すると、さまざまな条件下で自動ジャンプを実現できます。

要約すると、Vue Router でマルチレベルリダイレクトを実装する手順は次のとおりです。