Comment utiliser vue router+vuex pour réaliser un jugement de vérification de connexion à la page d'accueil

Cette fois, je vais vous montrer comment utiliser vue router+vuex pour réaliser le jugement de vérification de connexion à la page d'accueil. Quelles sont les précautions concernant l'utilisation de vue router+vuex pour réaliser le jugement de vérification de connexion à la page d'accueil. Voici les cas pratiques, regardons ensemble.

Routeur 1.vue

RoutageJugement La première chose à laquelle nous pensons est le routeur.avant Chacun précède la navigation garde Cette méthode accepte trois paramètres à partir du suivant.

Le paramètre to est le chemin de routage qui est sur le point de sauter, d'où est l'itinéraire que la navigation actuelle est sur le point de quitter, et la méthode suivante est utilisée pour résoudre le crochet.

Ce qui suit est un exemple de jugement écrit au travail :

router.beforeEach(async (to, from, next) => {
 const { name, meta } = to;
 const { requireLogin } = meta;
 if (name === 'login') { // 如果是登录页则用next方法resolve掉这个钩子，如果不是，进行到下一个判断
  return next();  
 }
 const needLogin = requireLogin && !store.getters.user.isLogin; // 从store中读取是否获取了已登录的信息
 if (needLogin) {
  return next({  // 如果没有则跳转到登录页，将当前路由路径放到参数中
   name: 'login',
   params: { back: to },
  });
 }
 return next(); 
});

2 this.$router et this.$route this.$router.push. Avec this.$router.replace

Après avoir terminé la demande de connexion sur la page de connexion, effectuez les opérations suivantes

Récupérez les paramètres du chemin précédent stockés dans le chemin , puis accédez à Cette page

 loginSuccess() {
   const { params: { back } } = this.$route;
   const route = back || { name: 'home' };
   const { name, params, query } = route;
   this.$router.replace({ name, params, query });
  },

Dans le code ci-dessus, deux concepts que nous confondons souvent apparaissent :

Nous savons que ceci.$router est une instance de routeur et peut être utilisé pour accéder directement à l'itinéraire. Nous appelons chaque objet de la configuration du routeur un enregistrement de routage, et this.$route est exposé pour accéder à chaque enregistrement de routage. Par conséquent, nous utilisons this.$route pour obtenir des paramètres et this.$router pour sauter des itinéraires.

Dans le code supérieur, nous utilisons replace au lieu de push pour sauter l'itinéraire. La différence entre les deux est de savoir si un enregistrement sera généré dans l'historique. replace n'ajoute pas de nouvel enregistrement, mais remplace directement l'enregistrement de routage.

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 chinois de php !

Lecture recommandée :

Comment créer un environnement de développement webpack+react

Comment utiliser JS pour appeler un local appareil photo

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!