リダイレクトvueの実装方法-フロントエンドQ&A-php.cn

リダイレクトvueの実装方法

WBOY

リリース： 2023-05-11 10:51:36

オリジナル

5349 人が閲覧しました

Vue アプリケーション開発プロセス中、リダイレクトは一般的な要件です。たとえば、ユーザーが正常にログインした後、ホームページにリダイレクトされる必要があります。この記事では、Vue でリダイレクトを実装する方法を説明します。

1. Vue Router を使用したナビゲーションガード

Vue Router は、Vue.js の公式ルーティングマネージャーです。 Vue Router にはナビゲーションガードメカニズムがあり、その主な機能は、ルートが変更される前にガードに入る、およびルートが変更された後にガードに入るということです。

リダイレクト機能を実装する場合、Vue Router のナビゲーションガード機能を使用して、ルートが変更される前にガードに入り、ルーティングオブジェクトを通じてリダイレクト操作を実行できます。

具体的には、以下に示すように、ルーティング構成ファイルにナビゲーションガードを設定できます。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      needLogin: true, // 需要登录
    },
  },
];

const router = new Router({
  routes,
});

// 导航守卫
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token'); // 判断是否登录
  if (to.meta.needLogin) { // 判断是否需要登录
    if (isLogin) {
      next();
    } else {
      next({
        name: 'login', // 跳转到登录页面
      });
    }
  } else {
    next();
  }
});

export default router;

ログイン後にコピー

上記のコードでは、最初に 2 つのルート、つまりログインページとホームページを定義します。ホームページのルーティング設定に、ページにアクセスするにはログインが必要であることをマークするためのメタ属性を追加しました。次に、ナビゲーションガードで、ユーザーがログインしているかどうか、および現在のページにログインが必要かどうかを判断します。ユーザーがすでにログインしていて、現在のページにログインが必要な場合は、引き続きページにアクセスできます。それ以外の場合、ユーザーはログインページにリダイレクトされます。

2. Vue Router のプログラムによるナビゲーションを使用する

ナビゲーションガードを使用してリダイレクトを実装することに加えて、Vue Router のプログラムによるナビゲーションを使用してリダイレクト機能を実装することもできます。

Vue Router は、プログラムによるナビゲーションを実装するための 2 つのメソッドを提供します:

this.$router.push(location, onComplete?, onAbort?): ルートを切り替えるために使用され、ブラウザーを維持できます。歴史。
this.$router.replace(location, onComplete?, onAbort?): ルートを切り替え、ブラウザ履歴を置き換えるのに使用されます。

リダイレクトが必要なコンポーネントで Push または replace メソッドを呼び出すことで、リダイレクトを実装できます。

たとえば、ユーザーが正常にログインした後、ユーザーをホームページにリダイレクトできます。コードは次のとおりです:

// 用户登录成功后，进行重定向操作
this.$router.push('/home');

ログイン後にコピー

3. メタをプログラムナビゲーションと組み合わせて使用します

If we need リダイレクト時にいくつかのパラメーターを渡す必要がある場合、またはリダイレクトのターゲットアドレスを動的に計算する必要がある場合は、メタをプログラムナビゲーションと組み合わせて使用してこれを実現する必要があります。

具体的には、ルーティング構成でメタ属性を設定して、いくつかのパラメーターまたは計算されたターゲットアドレスを保存し、コンポーネントのプログラムナビゲーションを通じてリダイレクトできます。

以下はサンプルコードです:

// 路由配置文件
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      needLogin: true,
    },
  },
  {
    path: '/profile',
    name: 'profile',
    component: () => import('@/views/profile.vue'),
    meta: {
      needLogin: true,
    },
  },
  {
    path: '/redirect',
    name: 'redirect',
    component: () => import('@/views/redirect.vue'),
  },
];

// 跳转到profile页面，需要登录且传递了参数
this.$router.push({
  name: 'redirect',
  query: {
    redirectTo: 'profile',
    params: {
      username: '张三',
      age: 18,
    },
  },
});

ログイン後にコピー

上記のコードでは、リダイレクトされたターゲットアドレスを受信するためのリダイレクトルートを定義します。フロントエンドコードでは、$router.push メソッドを呼び出して、リダイレクトする必要があるページをクエリパラメーターとしてリダイレクトルートに渡し、次にリダイレクトコンポーネントでクエリパラメーターを取得してリダイレクト操作を実行します。

4. ナビゲーションガードを使用したグローバルガード

Vue Router は、グローバルガードメカニズムを提供し、これを通じてグローバルガードがルーティング変更の前後にユーザーアクセスログの記録、グローバルインターセプトなどの一部の操作を実行できます。、など。

グローバルガードでは、次のメソッドを使用してリダイレクト操作を実行できます。たとえば、次のコードは、ウィンドウサイズが特定の値より小さい場合に、自動的にモバイルページにジャンプします:

// 全局守卫
router.beforeEach((to, from ,next) => {
  const userAgentInfo = navigator.userAgent;
  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
  let flag = true;
  for (let i = 0; i < Agents.length; i++) {
    if (userAgentInfo.indexOf(Agents[i]) > 0) {
      flag = false;
      break;
    }
  }
  if (flag && window.innerWidth < 768) {
    next('/mobile');
  } else {
    next();
  }
})

ログイン後にコピー

上記のコードでは、グローバルガードでウィンドウサイズとデバイスタイプを決定します。条件が満たされている場合は、次のメソッドを使用してリダイレクト操作を実行します。

概要

この記事では、Vue ルーターのナビゲーションガード、プログラムによるナビゲーション、グローバルガードの使用、メタと組み合わせてパラメーターを渡す方法など、Vue アプリケーションでリダイレクトを実装するさまざまな方法を紹介します。。実際の開発では、ニーズに応じて最適なリダイレクト機能の実装方法を選択できます。

以上がリダイレクトvueの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。