Comment implémenter la vue de redirection

Pendant le processus de développement de l'application Vue, la redirection est une exigence courante. Par exemple, une fois qu'un utilisateur s'est connecté avec succès, il doit être redirigé vers la page d'accueil. Dans cet article, nous explorerons comment implémenter la redirection dans Vue.

1. Utilisez la garde de navigation de Vue Router

Vue Router est le gestionnaire de routage officiel de Vue.js. Dans Vue Router, il existe un mécanisme de garde de navigation, sa fonction principale est d'entrer dans la garde avant le changement d'itinéraire et d'entrer dans la garde après le changement d'itinéraire.

Lors de la mise en œuvre de la fonction de redirection, nous pouvons utiliser la fonction de garde de navigation de Vue Router pour entrer dans la garde avant que l'itinéraire ne change, puis effectuer l'opération de redirection via l'objet de routage.

Plus précisément, nous pouvons définir la garde de navigation dans le fichier de configuration de routage, comme indiqué ci-dessous :

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;

Dans le code ci-dessus, nous définissons d'abord deux itinéraires, respectivement le login la page et la page d'accueil. Dans la configuration de routage de la page d'accueil, nous avons ajouté un attribut méta pour indiquer que la page nécessite une connexion pour y accéder. Ensuite, dans la garde de navigation, nous déterminons si l'utilisateur est connecté et si la page actuelle nécessite une connexion. Si l'utilisateur est déjà connecté et que la page actuelle nécessite une connexion, vous pouvez continuer à accéder à la page, sinon l'utilisateur le sera. redirigé vers la page de connexion.

2. Utilisez la navigation programmatique de Vue Router

En plus d'utiliser les gardes de navigation pour implémenter la redirection, nous pouvons également utiliser la navigation programmatique de Vue Router pour implémenter la fonction de redirection.

Vue Router fournit deux méthodes pour implémenter la navigation par programmation :

• this.$router.push(location, onComplete?, onAbort?) : à utiliser pour changer d'itinéraire , l'historique du navigateur peut être conservé.
• this.$router.replace(location, onComplete?, onAbort?) : utilisé pour changer d'itinéraire et remplacer l'historique du navigateur.

Nous pouvons implémenter la redirection en appelant la méthode push ou replace dans le composant qui doit être redirigé.

Par exemple, une fois que l'utilisateur s'est connecté avec succès, nous pouvons le rediriger vers la page d'accueil, le code est le suivant :

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

3. 🎜🎜## 🎜🎜#Si nous devons transmettre certains paramètres lors de la redirection, ou si nous devons calculer dynamiquement l'adresse cible de la redirection, nous devons utiliser une méta combinée à une navigation programmatique pour y parvenir.

Plus précisément, nous pouvons définir l'attribut méta dans la configuration de routage pour stocker certains paramètres ou l'adresse cible calculée, puis rediriger via la navigation programmatique dans le composant.

Ce qui suit est un exemple de code :

// 路由配置文件
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,
    },
  },
});

Dans le code ci-dessus, nous définissons une route de redirection pour recevoir l'adresse cible redirigée. Dans le code frontal, nous transmettons la page qui doit être redirigée comme paramètre de requête vers la route de redirection en appelant la méthode $router.push, puis dans le composant de redirection, obtenons le paramètre de requête et effectuons l'opération de redirection.

4. Les gardes globaux utilisant les gardes de navigation

Vue Router fournit un mécanisme de garde global, grâce auquel les gardes globaux peuvent effectuer certaines opérations avant et après les modifications de routage, telles que l'enregistrement des accès des utilisateurs. journaux, interception globale, etc.

Dans la garde globale, nous pouvons utiliser la méthode suivante pour effectuer des opérations de redirection. Par exemple, le code suivant passe automatiquement à la page mobile lorsque la taille de la fenêtre est inférieure à une certaine valeur :

// 全局守卫
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();
  }
})

Dans le code ci-dessus, nous déterminons la taille de la fenêtre et le type d'appareil dans la garde globale , si les conditions sont remplies, utilisez la méthode suivante pour effectuer l'opération de redirection.

Summary

Cet article présente différentes manières d'implémenter la redirection dans les applications Vue, notamment en utilisant les gardes de navigation, la navigation programmatique et les gardes globaux de Vue Router, ainsi que la combinaison de la méthode méta pour passer paramètres. Dans le développement réel, nous pouvons choisir la manière la plus appropriée d'implémenter la fonction de redirection en fonction de nos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!