Explication détaillée de la façon d'utiliser les gardes de routage dans vue2.0

Cette fois, je vais vous apporter une explication détaillée de la façon d'utiliser les gardes de route dans vue2.0 Quelles sont les précautions lors de l'utilisation des gardes de route dans vue2.0 Voici des cas réels, prenons un. regarder.

Effectuer une vérification avant les sauts de routage, comme la vérification de la connexion, est une exigence courante sur les sites Web.

À cet égard, le avantRouteUpdate fourni par vue-route peut facilement implémenter des navigation gardes (navigation-guards).

Le nom navigation-guards semble bizarre, mais puisque le document officiel le traduit ainsi, appelons-le ainsi.

Collez l'adresse du document : https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

Global Guard

Vous pouvez utiliser router.beforeEach pour enregistrer un global front guard :

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

Lorsqu'une navigation est déclenchée, le global front guard est appelé dans le ordre de création. Les gardes sont analysées et exécutées de manière asynchrone. À ce stade, la navigation attend que toutes les gardes soient résolues.

Chaque méthode de garde reçoit trois paramètres :

1. vers : Route : l'objet route cible à saisir

2. depuis : Route : L'itinéraire que la navigation actuelle est sur le point de quitter

3. suivant : Fonction : Cette méthode doit être appelée pour résoudre ce hook. L'effet d'exécution dépend des paramètres d'appel de la méthode suivante.

1. next() : passez au hook suivant dans le pipeline. Si tous les hooks sont exécutés, le statut de la navigation est confirmé.

2. next(false) : Interrompre la navigation en cours. Si l'URL du navigateur change (peut-être manuellement par l'utilisateur ou par le bouton retour du navigateur), l'adresse URL sera réinitialisée à l'adresse correspondant à l'itinéraire d'origine.

3. next('/') ou next({ path: '/' }) : accédez à une autre adresse. La navigation en cours est interrompue et une nouvelle navigation démarre.

4. next(error): (2.4.0+) Si le paramètre passé à next est une instance d'Error, la navigation sera terminée et l'erreur sera transmise à router.onError( ) rappel enregistré.

Assurez-vous d'appeler la méthode suivante, sinon le hook ne sera pas résolu.

Écrivez un exemple ci-dessous :

1. Répertoriez la "collection d'itinéraires" qui doit déterminer le statut de connexion lorsque vous accédez à l'itinéraire dans la collection, si ". non connecté" Statut", puis passez à la page de connexion LoginPage ;

2. Lorsque vous entrez directement dans la page de connexion LoginPage, si "Statut connecté", passez à la page d'accueil

import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile';
Vue.use(Router)
const router = new Router({
 routes: [
  {
   path: '/', // 默认进入路由
   redirect: '/home'  //重定向
  },
  {
   path: '/login',
   name: 'login',
   component: LoginPage
  },
  {
   path: '/home',
   name: 'home',
   component: HomePage
  },
  {
   path: '/good-list',
   name: 'good-list',
   component: GoodsListPage
  },
  {
   path: '/good-detail',
   name: 'good-detail',
   component: GoodsDetailPage
  },
  {
   path: '/cart',
   name: 'cart',
   component: CartPage
  },
  {
   path: '/profile',
   name: 'profile',
   component: ProfilePage
  },
  {
   path: '**',  // 错误路由
   redirect: '/home'  //重定向
  },
 ]
});
// 全局路由守卫
router.beforeEach((to, from, next) => {
 console.log('navigation-guards');
 // to: Route: 即将要进入的目标 路由对象
 // from: Route: 当前导航正要离开的路由
 // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
 let isLogin = global.isLogin; // 是否登录
 // 未登录状态；当路由到nextRoute指定页时，跳转至login
 if (nextRoute.indexOf(to.name) >= 0) { 
  if (!isLogin) {
   console.log('what fuck');
   router.push({ name: 'login' })
  }
 }
 // 已登录状态；当路由到login时，跳转至home 
 if (to.name === 'login') {
  if (isLogin) {
   router.push({ name: 'home' });
  }
 }
 next();
});
export default router;

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment utiliser les modèles de chaînes dans Vue

Comment gérer l'erreur d'économie d'installation Mac due à bisons

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!