Le routage Vue-router détermine que la page n'est pas connectée et passe à la page de connexion

Cet article vous apporte principalement un exemple de la façon dont Vue-router détermine que la page n'est pas connectée et accède à la page de connexion. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Comme indiqué ci-dessous :

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
 if (token) { // 判断当前的token是否存在
  next();
 }
 else {
  next({
  path: '/login',
  query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
  })
 }
 }
 else {
 next();
 }
});

Avant cela, ajoutez un attribut méta à l'itinéraire :

{
 path: '/index',
 meta: {
  title: '',
  requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
 },
}

Remarque : Mais le fait est que la plupart du temps lors de la connexion Il n'y a pas de saut, vous devez donc ici ajouter une section au chemin de saut de connexion :

if(this.$route.query.redirect){
//  let redirect = decodeURIComponent(this.$route.query.redirect);
  let redirect = this.$route.query.redirect;
  this.$router.push(redirect);
}else{
  this.$router.push('/');
 }

Recommandations associées :

Trois types de Vue-Router à implémenter entre les composants Jump

À propos de vue-router pour implémenter le transfert de paramètres de saut entre les composants

Explication détaillée du routage vue-router et inter-page navigation

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!